vue：el-pagination分页基础应用

文档

页面部分

1. layout：表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量。    

分页

表格

逻辑部分

 //数据
 data(){
     return{
         datalist:[
             {Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},{Name:"a"},       
         ],
         currentPage: 1,
         pageSize: 10,
     }
 }
 ​
 methods: {
     // 分页
     handleSizeChange(val) {
       this.currentPage = 1;
       this.pageSize = val;
     },
     // 分页
     handleCurrentChange(val) {
       this.currentPage = val;
     },
   },

注意

• total 和 page-count 必须传一个，不然组件无法判断总页数；优先使用 page-count;

• 如果传入了 current-page 必须监听 current-page 变更的事件（onUpdate:currentPage）；否则分页切换不起作用；

• 如果传入了 page-size，且布局包含 page-size 选择器（即 layout 包含 sizes），必须监听 page-size 变更的事件（onUpdate:pageSize），否则 page-size 切换不起作用；

更多事件及参数可看文档