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"

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章