上个小节，我们写好了查询角色分页的后端代码，本小节我们来完成前端部分的设计。

一、熟悉前端页面

我们首先看一下模型层定义的变量，除了有查询条件之外，还有与分页相关的变量，以及保存勾选的角色记录的变量，最后是表单验证的规则。总体上来看，跟用户管理页面的模型层差不多。

data: function() {
    return {
        dataForm: {
            roleName: null
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        dataRule: {
            roleName: [{ required: false, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{1,10}$', message: '角色格式错误' }]
        }
    };
},

接下来我们看看前端页面的表单控件是怎么定义的。当用户点击查询按钮的时候，触发点击事件对应的回调函数是searchHandle()，这个函数是我们一会儿要声明的。

<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
    <el-form-item prop="roleName">
        <el-input
            v-model="dataForm.roleName"
            placeholder="角色名称"
            size="medium"
            class="input"
            clearable="clearable"
        />
    </el-form-item>
    <el-form-item>
        <el-button size="medium" type="primary" @click="searchHandle()">查询</el-button>
        <el-button
            size="medium"
            type="primary"
            :disabled="!isAuth(['ROOT', 'ROLE:INSERT'])"
            @click="addHandle()"
        >
            新增
        </el-button>
        <el-button
            size="medium"
            type="danger"
            :disabled="!isAuth(['ROOT', 'ROLE:DELETE'])"
            @click="deleteHandle()"
        >
            批量删除
        </el-button>
    </el-form-item>
</el-form>

角色管理页面中的表格设计，与用户管理页面类似，只不过列数要少了很多。

<el-table
    :data="dataList"
    border
    v-loading="dataListLoading"
    @selection-change="selectionChangeHandle"
    cell-style="padding: 4px 0"
    style="width: 100%;"
    size="medium"
>
    <el-table-column
        type="selection"
        :selectable="selectable"
        header-align="center"
        align="center"
        width="50"
    />
    <el-table-column type="index" header-align="center" align="center" width="100" label="序号">
        <template #default="scope">
            <span>{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
    </el-table-column>
    <el-table-column prop="roleName" header-align="center" align="center" label="角色名称" min-width="180"/>
    <el-table-column header-align="center" align="center" label="权限数量" min-width="140">
        <template #default="scope">
            <span>{{ scope.row.permissions }}个</span>
        </template>
    </el-table-column>
    <el-table-column prop="users" header-align="center" align="center" label="关联用户" min-width="140">
        <template #default="scope">
            <span>{{ scope.row.users }}人</span>
        </template>
    </el-table-column>
    <el-table-column prop="desc" header-align="center" align="center" label="备注" min-width="450" />
    <el-table-column prop="systemic" header-align="center" align="center" label="内置角色" min-width="100">
        <template #default="scope">
            <span>{{ scope.row.systemic ? '是' : '否' }}</span>
        </template>
    </el-table-column>
    <el-table-column header-align="center" align="center" width="150" label="操作">
        <template #default="scope">
            <el-button
                type="text"
                size="medium"
                :disabled="!isAuth(['ROOT', 'ROLE:UPDATE']) || scope.row.id == 0"
                @click="updateHandle(scope.row.id, scope.row.systemic)"
            >
                修改
            </el-button>
            <el-button
                type="text"
                size="medium"
                :disabled="!isAuth(['ROOT', 'ROLE:DELETE']) || scope.row.systemic || scope.row.users > 0"
                @click="deleteHandle(scope.row.id)"
            >
                删除
            </el-button>
        </template>
    </el-table-column>
</el-table>

分页控件跟用户管理页面也差不多，基本上本项目所有页面的分页控件写法都是类似的。

<el-pagination
    @size-change="sizeChangeHandle"
    @current-change="currentChangeHandle"
    :current-page="pageIndex"
    :page-sizes="[10, 20, 50]"
    :page-size="pageSize"
    :total="totalCount"
    layout="total, sizes, prev, pager, next, jumper"
></el-pagination>

二、加载页面数据

大家看好了，这才是你要写的代码，我们在role.vue页面中，声明加载角色数据的封装方法。

loadDataList: function() {
    let that = this;
    that.dataListLoading = true;
    let data = {
        roleName: that.dataForm.roleName,
        page: that.pageIndex,
        length: that.pageSize
    };
    that.$http('role/searchRoleByPage', 'POST', data, true, function(resp) {
        let page = resp.page;
        that.dataList = page.list;
        that.totalCount = page.totalCount;
        that.dataListLoading = false;
    });
},

然后在本页面的生命周期函数create()中调用loadDataList()，实现进入页面就在表格中加载无条件查询的第一页角色记录。

created: function() {
    this.loadDataList();
}

为分页控件设置翻页和改变显示记录数量的回调函数。

<el-pagination
    @size-change="sizeChangeHandle"
    @current-change="currentChangeHandle"
    :current-page="pageIndex"
    :page-sizes="[10, 20, 50]"
    :page-size="pageSize"
    :total="totalCount"
    layout="total, sizes, prev, pager, next, jumper"
></el-pagination>

sizeChangeHandle: function(val) {
    this.pageSize = val;
    this.pageIndex = 1;
    this.loadDataList();
},
currentChangeHandle: function(val) {
    this.pageIndex = val;
    this.loadDataList();
},

三、有条件查询数据

我们声明查询按钮点击事件对应的回调函数，写完这个函数大家就可以运行前后端项目，测试一下数据的查询和分页效果。

searchHandle: function() {
    this.$refs['dataForm'].validate(valid => {
        if (valid) {
            this.$refs['dataForm'].clearValidate();
            if (this.dataForm.roleName == '') {
                this.dataForm.roleName = null;
            }
            if (this.pageIndex != 1) {
                this.pageIndex = 1;
            }
            this.loadDataList();
        } else {
            return false;
        }
    });
},