实现分页功能的关键技术点为页面显示的结果处理,而此处的关键技术点为JS的slice()方法。
首先介绍slice()方法:
slice() 方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
主要用法:
array.slice(start, end)
参数 | 描述 |
---|---|
start | 可选。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 |
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 |
Element-ui中的table组件所绑定的值为list,因此可以采用slice()方法实现,如:
wx_attention_list.slice((currentPage-1)*pagesize,currentPage*pagesize)
其中:
currentPage表示当前页码,
pagesize表示每页显示条目个数。
附代码:
table:
<el-table
:data="wx_attention_list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
border
stripe
show-summary
:summary-method="getTotal"
style=" 75%;margin:20px auto 15px auto;">
<el-table-column
prop="number"
label="序号"
width="100"
>
</el-table-column>
<el-table-column
prop="wx_key_word"
label="公众号"
>
</el-table-column>
<el-table-column
prop="num"
label="数量"
>
</el-table-column>
</el-table>
pagination:
<el-pagination
:current-page.sync="currentPage"
:page-size="pagesize"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
附图: