vue + Element-ui 实现分页

实现分页功能的关键技术点为页面显示的结果处理，而此处的关键技术点为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="width: 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>

附图：

 

转载于:https://www.cnblogs.com/kadima-zy/p/page.html