vue中Element UI表格分页功能的实现

一、需求问题

在vue的开发中，如果需要开发管理系统，那么Element UI就是一个不错的UI框架。在Element UI中的表格数据，如果数据量大的话，通过后端进行分页。如果数据量不大的话，我们可以直接通过前端进行分页。在Element UI中也提供了分页组件 el-pagination,下面就是通过 el-pagination 实现表格的分页功能。

二、需求分析

在使用Element UI的el-pagination分页组件的时候，需要写明 page-size、current-page.sync和total，page-size是每页的数据条数，current-page 是初始页，total是默认的数据总数，绑定属性，在data中也同样设置好currentPage和 pageSize的值。由于需要对整个表格的数据进行分页，那么在el-table中的data也需要进行计算属性，比如说:data="nowTableData"，那么在computed中，进行相关的计算，对数据请求进行处理。

三、需求实现

代码完整示例如下：

<template>
    <div>
        <el-table
            :data="nowTableData"
            border
            style="width: 100%">
            <el-table-column
                prop="date"
                label="注册日期">
            </el-table-column>
            <el-table-column
                prop="username"
                label="用户姓名">
            </el-table-column>
            <el-table-column
                prop="email"
                label="用户邮箱">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <!-- scope.$index 为每行的索引     scope.row  为每一行的数据 -->
                    <el-button size="small" @click="handleToFreeze(scope.$index, scope.row)">{{ scope.row.isFreeze ? "已冻结" : "未冻结" }} </el-button>
                    <el-button size="small" @click="handleToDelete(scope.$index, scope.row)" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="page"
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            :total="tableData.length">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'users',
    data() {
        return {
            tableData: [],
            currentPage: 1,
            pageSize: 3
        }
    },
    mounted() {
        this.axios.get('/api2/admin/usersList').then((res) => {
            var status = res.data.status;
            if ( status === 0 ) {
                this.tableData = res.data.data.usersList;
            }
        });
    },
    computed: {
        nowTableData() {
            return this.tableData.slice( (this.currentPage -1) * this.pageSize, this.currentPage * this.pageSize) || [];
        }
    },
    methods: {
        handleToFreeze (index, row) {
            // index是每行的索引， row是每行的数据
            // console.log(index, row);
            this.axios.get('/api2/admin/updateFreeze', {
                email: row.email,
                isFreeze: !row.isFreeze
            }).then((res) => {
                var status = res.data.status;
                if ( status === 0) {
                    this.$alert('冻结操作已成功', '信息', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.tableData[index].isFreeze = !row.isFreeze;
                        }
                    });
                } 
                else {
                    this.$alert('冻结操作失败', '信息', {
                        confirmButtonText: '确定'
                    });
                }
            });
        },
        handleToDelete (index, row) {
            this.axios.get('/api2/admin/deleteUser', {
                email: row.email
            }).then((res) =>  {
                var status = res.data.status;
                if ( status === 0) {
                    this.$alert('删除操作已成功', '信息', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.tableData.splice(index, 1);
                        }
                    });
                }
                else {
                    this.$alert('删除操作失败', '信息', {
                        confirmButtonText: '确定'
                    });
                }
            });
        }
    }
}
</script>

<style scoped>
.page { margin-top: 20px; }
</style>