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

 

<template>
       ...
        <el-table
          :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          v-loading="loading"
          highlight-current-row
          :header-cell-style="{background:'#f7f7f7'}"
          >
          <el-table-column prop="startDate" label="起始时间" align="center" min-width="100"></el-table-column>
          <el-table-column prop="endDate" label="结束时间" align="center"></el-table-column>
          <el-table-column prop="value" label="流量峰值(M)" align="center" sortable min-width="150"></el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            background
            layout="total, sizes, prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :page-sizes="sizesArray"
        ></el-pagination>
    
       ...
</template>

<script>
import initPagin from '@/mixins/initPagin.js';
export default {
    mixins: [initPagin],
    data() {
        tableData: []
        ...
    }    
}

</script>

 

四、本地分页显示效果

 

 

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