Vue实现分页功能
Vue实现分页
·
效果:
在vue文件中实现分页功能需要修改template和script。
其中template中加入,其中el-table中绑定的数据为showTableData
<div class="pageStyle">
<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="numberPerPage" :total="total" margin-top="100px">
</el-pagination>
</div>
script中加入
methods: {
async getShopList(){
let result = await this.$http.getShopList();
this.tableData = result.data.list;
this.showTableData = result.data.list.slice(0,this.numberPerPage);
this.total = result.data.list.length;
},
handleCurrentChange(currentindex){
// console.log(currentindex);
this.showTableData = this.tableData.slice((currentindex-1)*5, currentindex*5)
// console.log(this.tempTableData);
},
created() {
this.currentdata = this.contentdata.slice(0, 6)
},
},
data() {
return {
tableData: [],
total:0,
showTableData:[],
numberPerPage:5, //希望每页展示的数据个数
};
},
更多推荐
已为社区贡献2条内容
所有评论(0)