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="width: 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"