element plus 表各组件怎样和分页组件配合使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了element plus 表各组件怎样和分页组件配合使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element plus 网址：点击跳转

初次使用element plus 组件库时不理解表格组件如何与分页组件配合使用，本文傻瓜式教学，简单好抄。

表格

随便找一段表格代码：

element plus 表各组件怎样和分页组件配合使用,vue.js,javascript,前端,elementui

<el-table
    :data="tableData"
    :default-sort="{ prop: 'date', order: 'descending' }"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" sortable width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" :formatter="formatter" />
  </el-table>

讲上面的 :data='' '' 里的代码换成下方红线的代码

element plus 表各组件怎样和分页组件配合使用,vue.js,javascript,前端,elementui

<el-table
    :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe
    :default-sort="{ prop: 'date', order: 'descending' }"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" sortable width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" :formatter="formatter" />
  </el-table>

到这里，表格配置完成