在main.js中引入:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
html:
<el-pagination
:total="total"
:page-size="msgSize"
background
:page-sizes="[2, 3, 5, 10, 50, 100]"
:pager-count="5"
:current-page="msgPage"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
js:
需要定义的数据:data
data() {
return {
total:0,
tableData:null,
msgPage:0,
msgSize:5
}
},
函数:
methods: {
handleSizeChange(val) {
this.msgSize = val;
this.getList();
},
handleCurrentChange(val) {
this.msgPage = val;
this.getList();
},
getList() {
if (this.msgPage < 0) this.msgPage = 1;
let param = {
token: sessionStorage.getItem('token'),
pageNum: this.msgPage,
pageSize: this.msgSize,
}
getAllPaper(param).then(response => {
console.log("param",param)
if (response.data.code == '100') {
this.tableData = response.data.data.list
this.total = response.data.data.total
}
})
},
}
注意点:
msgSize:5影响了每页多少条数据的初始值,当msgSize:5时,初始就是5条,
参考文章:element-ui中el-pagination分页组件,切换每页显示数量时,有时候数据不显示或获取到的数据为空;只想触发size-change事件不触发current-change事件