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

深碍√TFBOYSˉ_ 2023-06-24 15:26 17阅读 0赞

**一、需求问题**

在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">
                        
                        <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>