当数据量比较多，但后台又是一次性将数据返回时，需要对静态数据惊醒分页显示
- 主要用到Array.prototype.slice()方法：slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）
2.监听分页的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.主要改动为
image.png
图片来自：https://blog.csdn.net/Polarisone/article/details/103848817
