Vue + Element-ui table组件封装之分页

封装目的

实现在前端根据页面跳转或者页面显示条数的选择，更新table中显示的数据

主要思路

一个page对象（data中）

pageObj: {
    page: 1,
    pageSize: 2,
    pageSizeList: [2, 4, 6],
 },

因为这里数据量比较小就只拿2，4，6来做一个示例

一个list计算属性

computed: {
    list() {
        let array = []
        this.listData.forEach((item,index) => {
            let i = Math.floor(index / this.pageObj.pageSize)
            if(!array[i]) {
                array.push([])
            }
             array[i].push(item)
        })
        return array[this.pageObj.page - 1]
    }
}

这里的的listData是页面中的所有数据，主要思路就是存储一个二维数组，其中一维是第几页，二维是这一页的数据，将这个list数据传给<el-table>组件作为表格的data

page和pagesize的改变

利用element的<el-pagination>组件

<el-pagination
    :current-page.sync="pageObj.page"
    :page-sizes="pageObj.pageSizeList"
    :page-size="pageObj.pageSize"
    :total="total"
    layout="total, sizes, prev, pager, next, jumper"
    @current-change="onPageChange"
    @size-change="onSizeChange"
/>

这里的两个change事件会触发对应的事件，改变data中的pageObj

methods: {
    onPageChange(page) {
        this.pageObj.page = page
    },
    onSizeChange(size) {
        this.pageObj.pageSize = size
        this.pageObj.page = 1
    },
 }

这样就大概实现好一个可以随着页数和size切换数据的表格，但是如果数量较大的话，还是建议把pageObj作为参数传给后台从后台拿数据~