element实现前端分页
注意事项:分页table并不是本来就绑定的,需要对数据进行处理
element的分页组件和表格组件并不是绑定的,所以如果前端分页的话,分页组件只能控制点击时显示哪部分数据,因此table也只能绑定显示的数据而不是所有数据.
实现:
html:
<el-table
:header-cell-style="{background:'#DFECF0',color:'#000'}"
:cell-style="cellStyle"
size="small"
:data="dataShow"
style="width: 100%">
<!--若干el-table-column...-->
<!--注意绑定的是dataShow就可以了-->
</el-table>
<el-pagination
:page-size="pageSize"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="prev, pager, next"
:total="totalAPI">
</el-pagination>
js:
export default{
data(){
return{
// 分页数据
totalPageData: [],
pageSize: 5,
pageNum: 1,
currentPage: 1,
totalAPI: 1,
tableData: [],
dataShow: [],}
}
method:{
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
this.dataShow = this.totalPageData[currentPage - 1]
// console.log(this.currentPage) //点击第几页
},
calcPageData() {
if (this.tableData.length > 1) {
this.pageNum = Math.ceil(this.totalAPI / this.pageSize) || 1
}
for (let i = 0; i < this.pageNum; i++) {
this.totalPageData[i] = this.tableData.slice(this.pageSize * i, this.pageSize * (i + 1))
}
this.dataShow = this.totalPageData[this.currentPage - 1]
},
getAPITokenList() {
this.tableData.length = 0
let _this = this
http.get('/proxyName',
_this.GLOBAL.User + '/token_list/',
{},
{"Authorization": "Bearer " + sessionStorage.getItem('tk')})
.then(res => {
if (res.code === 200) {
let length = res.data.length
_this.totalAPI = length
for (let i = 0; i < length; i++) {
var Data = {}
Data.tokenID = res.data[i].token_id
Data.tokenLabel = res.data[i].label
Data.date = res.data[i].create_time
Data.overTime = res.data[i].overtime
Data.whiteList = (res.data[i].ip_white).toString()
_this.tableData.push(Data)
}
this.calcPageData()
} else {
this.$message({
type: 'error',
message: _this.$t('customerCenter.fail_get_tokenList')
});
}
console.log(res)
})
},}
}