这是在一次性从后台获取到所有数据后进行分页显示
运用element ui中的el-pagination标签进行分页
current-change表示点击页数改变时会触发;current-page表示当前页,page-size表示每页要显示的数据条数;total表示数据的总条数
在data中定义这些数据:
mounted() {
this.$store.dispatch("reqIntelligence");
setTimeout(()=>{
this.getShowTableData();
},500)
},
methods: {
//要展示的数据
getShowTableData() {
//获取所有的数据,这里是用vuex的,具体情况具体分析
this.allintelligence = intelligence.state.intelligence;
// 获取截取开始索引
let begin = (this.pageIndex - 1) * this.pageSize;
// 获取截取结束索引
let end = this.pageIndex * this.pageSize;
// 通过索引去截取,从而展示
this.showintelligence = this.allintelligence.slice(begin, end);
},
//点击翻页时触发
changePageNum: function(val) {
this.pageIndex = val;
this.getShowTableData();
}
},
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)