element表格和分页如何配合使用:
//把原来的:
<el-table :data="res.data.result">
</el-table>
//改成:
<el-table
:data="res.data.result.slice((currentPage-1)*pagesize,currentPage*pagesize)">
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
layout=" jumper,prev, pager, next"
prev-text="上一页"
next-text="下一页">
</el-pagination>
//要显示页码,可以加上:total="res.data.result.length" ,
并在layout中加上total,
//表格中的内容这里就省略了
两种效果对比如下图所示
data中加入:
currentPage: 1, //默认显示页面为1
pagesize: 10, // 每页的数据条数
methods:
methods: {
getGoodsList () {
this.$axios.get('../static/test.json').then((res) => {
//用axios的方法引入地址
this.res=res
//赋值
console.log(res.data)
})
},
//点击第几页
handleCurrentChange: function(currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage)
},