Element + Vue 实现表格本地分页（涉及标签 'el-pagination' 和 Vue的 mixins混入属性）

一、版本说明

"element-ui": "^2.5.4",
"vue": "^2.5.2",
"vue-router": "^3.0.7"

 

---

二、封装 mixins 需要的文件，即分页中需要的属性 和 方法

2.1、 src目录下，新建文件夹 mixins，此目录下新建文件 initPagin.js文件（目录名、文件名自定义）    

 

目录如下：

 

---

initPagin.js  文件内容如下：

export default {
    data() {
        return {
            total: 0,                        // 总条数
            pageSize: 10,                    // 每页显示条数
            currentPage: 1,                  // 当前页数
            sizesArray: [10, 20, 50, 100]    // 可选择的页数
        }
    },
    methods: {
        // 改变页数
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        // 改变条数
        handleSizeChange(val) {
            this.pageSize = val;
        }
    }
}

 

---

三、组件中引入混入，mixins:[xxxxx] 即可

3.1、组件中添加分页标签 ，      并引入  initPagin.js  文件，      即可直接 this.total 使用混入中定义的属性和方法，      注意 中为表格赋值时，      使用了 数组的 slice() 方法实现本地分页（slice()  方法不会影响原数组大小 ），     Element-ui官网参考这里，示例如下：

 

 

四、本地分页显示效果

 

 

写给自己的随笔，有问题欢迎指出ψ(*｀ー´)ψ