elementui做自定义分页

当后端返回的数据没有做分页时，可以在vue页面配置element 分页组件做分页：

1，先在data中定义好分页相关的属性

currentPage: 1, // 当前页码
total: 10, // 总条数
pageSize: 10 // 每页的数据条数

2，在el-table中给数据源比如rightList做处理，这个是最核心的地方

<el-table :data="rightsList.slice((currentPage-1)*pageSize,currentPage*pageSize)" style=" 100%" stripe border>
</el-table>

3，在</el-table>下面添加分页组件，并设置好相关属性

 <el-pagination layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="currentPage" 
      :page-sizes="[10,20,30]" 
      :page-size="pageSize" 
      :total="rightsList.length">
    ></el-pagination>

4，分页方法处理

 handleSizeChange(val) 
{
	console.log(`每页 ${val} 条`);
	this.currentPage = 1;
	this.pageSize = val;
},

handleCurrentChange(val) {
	console.log(`当前页: ${val}`);
	this.currentPage = val;
}

重点：

slice() 方法可从已有的数组中返回选定的元素。

arrayObject.slice(start,end) 

参数start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

参数end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

el-table中的data数据：

:data="rightList.slice((currentPage-1)*pageSize,currentPage*pageSize)"

设置分页器total等于table数据的长度：

:total="tableData.length"