如何限制VUE项目中,element-UI的显示行?想控制每页的显示的行数怎么控制的?
解决办法:
使用slice()
方法,slice()
方法可从已有的数组中返回选定的元素。返回的数据是数组。
tableData
是数据组,
Pagesize
是限制每页的行数,
currentPage
是第几页数
<el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
style="width: 100%"
>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
data() {
return {
pagesize: 5,
currentPage:1,
}
})
推荐阅读: VUE模板语法快速入门教程