您的位置:首页 > 产品设计 > UI/UE

elementui el-table 后端分页

2019-05-05 10:34 387 查看
[code]<el-table  size='medium' :data="tableData" border style="width:100%"></el-table>
<el-pagination
v-show="isPage"
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="total, prev, pager, next, jumper"
:total="page.totalCount"
background
style="float:right;margin:10px 20px 0 0;">
</el-pagination>
data() {
return {
tableData: [],
page: {
currentPage: 1, // 当前页
pageSize: 10, // 每页显示条目个数
totalCount: 0 // 总条目数
},
isPage: false
}
},
methods:{
getTableData(pageNo) {
var self = this
self.$http.post().then(res => {
if (res.data.success) {
if (res.data.data.result.length>0) {
self.isPage = true
}
self.tableData = res.data.data.result
self.$set(self.page, 'totalCount', res.data.data.total)
self.$set(self.page, 'pageSize', res.data.data.pageSize)
self.$set(self.page, 'currentPage', res.data.data.currentPage)
}
})
.catch(function(error) {
console.log(error)
})
},
handleCurrentChange(val) {
this.getTableData(val)
}
}

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: