以防丢失,进而转载
原文链接:https://blog.csdn.net/weixin_42547971/article/details/112921030;
element
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="prev, pager, next"
:total="tableCopyTableList.length">
</el-pagination>
js
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
tableData: [], // 表格数据
tableCopyTableList: [], // 表格copy数据b
}
},
created() {
this.selectList()
},
methods: {
// 初始化数据
selectList(n) {
request({
url: 'url地址',
method: 'get',
params: '参数'
}).then(res => {
this.tableData = res.data
this.tableCopyTableList = JSON.parse(JSON.stringify(this.tableData))
this.tableData = this.currentChangePage(this.pageSize, this.currentPage)
})
},
// 页数改变事件
handleSizeChange(pageSize) {
this.pageSize = pageSize
this.tableData = this.currentChangePage(pageSize, this.currentPage)
},
// 页码改变切换
handleCurrentChange(currentPage) {
this.currentPage = currentPage
this.tableData = this.currentChangePage(this.pageSize, currentPage)
},
// 分页方法
currentChangePage(size, current) {
const tablePush = []
this.tableCopyTableList.forEach((item, index) => {
if (size * (current - 1) <= index && index <= size * current - 1) {
tablePush.push(item)
}
})
return tablePush
}
}
}