上个小节我们用Swagger测试了后端Web方法删除非内置的角色，那么本小节我们去把前端的JS代码写一下。

一、选中多条角色记录

在角色管理页面的表格中，我设置了复选框列，用户可以勾选多条记录。当用户勾选或者取消勾选记录的时候，都会触发@selection-change事件，需要回调函数记录下当前选中的记录。

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

大家注意，@selection-change回调函数的参数val传入的是数组格式的数据，内容不是选中记录的id，而是选中记录的完整数据。一会儿我们提交Ajax请求的时候，要从中提取出每条选中记录的id值。

selectionChangeHandle: function(val) {
    this.dataListSelections = val;
},

因为系统内置角色是禁止删除的，所以要禁止用户勾选内置角色，这就需要给<el-table-column>标签设置特定的属性，规定哪些记录是不可以勾选的。:selectable="selectable"说的是selectable()这个自定义函数来实现哪些记录可选择，哪些不可选择。

selectable: function(row, index) {
    //如果是内置角色或者关联了用户的角色，是禁止删除的
    if (row.systemic || row.users > 0) {
        return false;
    }
    return true;
},

很多同学看不懂row.users > 0里面的users是怎么来的，我帮你回忆一下查询角色分页记录的SQL语句。

<select id="searchRoleByPage" parameterType="HashMap" resultType="HashMap">
    SELECT
        r.id,
        r.role_name AS roleName,
        COUNT( u.id ) AS users,
        JSON_LENGTH ( r.permissions ) AS permissions,
        r.`desc`,
        r.systemic
    FROM tb_role r
    LEFT JOIN tb_user u ON JSON_CONTAINS ( u.role, CONVERT ( r.id, CHAR ) )
    WHERE 1=1
    <if test="roleName!=null">
        AND r.role_name LIKE '%${roleName}%'
    </if>
    GROUP BY r.id
    ORDER BY r.id
    LIMIT #{start}, #{length}
</select>

看到了吧，users在分页的时候我们就查出来了，users是某个角色关联的用户数量。

二、删除角色记录

我们先来看一下选中多条记录的时候，如何发送Ajax请求删除用户记录。

<el-button
    size="medium"
    type="danger"
    :disabled="!isAuth(['ROOT', 'ROLE:DELETE'])"
    @click="deleteHandle()"
>
    批量删除
</el-button>

我们要动手编写deleteHandle()函数，来应对按钮的点击。而且传入函数的参数是数组，无论删除一个角色还是多个角色都可以调用这个函数。

deleteHandle: function(id) {
    let that = this;
    let ids = id
        ? [id]
        : that.dataListSelections.map(item => {
              return item.id;
          });
    if (ids.length == 0) {
        that.$message({
            message: '没有选中记录',
            type: 'warning',
            duration: 1200
        });
    } else {
        that.$confirm(`确定要删除选中的记录？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            that.$http('role/deleteRoleByIds', 'POST', { ids: ids }, true, function(resp) {
                if (resp.rows > 0) {
                    that.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1200
                    });
                    that.loadDataList();
                } else {
                    that.$message({
                        message: '未能删除记录',
                        type: 'warning',
                        duration: 1200
                    });
                }
            });
        });
    }
},

想要删除当前行的用户记录，用户可以点击行内右侧的删除按钮，调用的还是deleteHandle()函数。删除按钮我设置了:disabled属性，不具备先关权限、是系统内置角色，或者有关联用户的，删除按钮是禁止点击的。

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

写好了JS代码，接下来我们可以运行前后端项目，删除一个非系统内置角色试一下。