添加分页功能

“dzb”

2022-09-20 be5cd659dd19c4f9ba5e00bb7a2906e9ed4df6f7

 src/views/systemSetting/baseSetting/role/index.vue

@@ -19,6 +19,7 @@
        </header>
        <main>
            <div class="mainContent">
                <!-- 数据展示 -->
                <el-table ref="multipleTable"
                    :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
                    :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
@@ -61,9 +62,16 @@
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 查看修改页面 -->
                <el-dialog :visible.sync="dialogUpdate" width="45%">
                    <updateUser :updateFlag="updateFlag" :userInfo=userInfo />
                </el-dialog>
                <!-- 分页 -->
                <div class="pagination">
                    <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
                        :page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev" @next-click="handleNext">
                    </el-pagination>
                </div>
            </div>
        </main>
    </div>
@@ -83,6 +91,9 @@
            dialogUpdate: false,
            updateFlag: false,
            userInfo: '',
            totalNum: 200,
            pageSize: 10,
            currentPage: 1,
        }
    },
    created() {
@@ -115,7 +126,8 @@
                        item.createTime = helper(item.createTime);
                        item.status == 1 ? item.status = true : item.status = false;
                    })
                    that.tableData = res.data.records;
                    that.totalNum = res.data.records.length;
                    that.tableData = res.data.records.slice((that.currentPage-1)*10,that.currentPage*10)
                }
            })
        },
@@ -139,7 +151,22 @@
            this.dialogUpdate = true;
            this.updateFlag = true;
            this.userInfo = rowData
        }
        },
        // 当前页改变触发事件
        changeCurrentPage(page){
            this.currentPage = page;
            this.getUserList();
        },
        // 上一页点击事件
        handlePrev(page){
            this.currentPage = page;
            this.getUserList();
        },
        // 下一页点击事件
        handleNext(page){
            this.currentPage = page;
            this.getUserList();
        },
    }
}
</script>
@@ -212,6 +239,20 @@
            line-height: 60px;
        }

        .pagination {
            margin-top: 50px;
            display: flex;
            line-height: 50px;
            justify-content: center;

            &::v-deep li,
            &::v-deep .btn-prev,
            &::v-deep .btn-next {
                background-color: #071f39;
                color: #4b9bb7;
            }
        }

        .el-table {
            color: #4b9bb7;
            font-size: 10px;