當(dāng)數(shù)據(jù)量比較多粟关，但后臺(tái)又是一次性將數(shù)據(jù)返回時(shí)慎框，需要對(duì)靜態(tài)數(shù)據(jù)驚醒分頁(yè)顯示
- 主要用到Array.prototype.slice()方法：slice 會(huì)提取原數(shù)組中索引從 begin 到 end 的所有元素（包含 begin荧止，但不包含 end）
2.監(jiān)聽分頁(yè)的current-change事件，改變tableData的值
- HTML部分
<el-table :data="tableData" style="width: 100%" ref="multipleTable" row-key="id" @selection-change="handleSelectChange" >
<el-table-column :label="col.label" show-overflow-tooltip v-for="col in cols" :key="col.prop" :render-header="setHeaderWidth">
<template slot-scope="scope">
<span>{{ scope.row[col.prop] }} </span>
</template>
</el-table-column>
</el-table>
<el-pagination class="pagination" @current-change="handleCurrentChange" :current-page="page"
:page-size="pageSize" layout="total, prev, pager, next" :total="total">
</el-pagination>
- JS部分
data() {
return {
page: 1,
pageSize: 15,
tableData:[],
tableDatas:{}
col:[{prop: 'nsrlxDm', label: '納稅人類型'}, {prop: 'nsrmc', label: '納稅人名稱'}]
}
},
methods:{
handleCurrentChange(val) {
this.$emit('currentChange', val, this.selectedRow)
this.tableData = this.tableDatas.data.slice((val-1)*this.pageSize,val*this.pageSize)
},
}
3.主要改動(dòng)為
image.png
圖片來自：https://blog.csdn.net/Polarisone/article/details/103848817
