上个小节我们用Swagger测试了后端Web方法删除无用户的部门，那么本小节我们去把前端的JS代码写一下。

一、选中多条部门记录

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

<el-table
    :data="dataList"
    border
    v-loading="dataListLoading"
    @selection-change="selectionChangeHandle"
    cell-style="padding: 4px 0"
    size="medium"
    style="width: 100%;"
>
    <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.emps > 0) {
        return false;
    }
    return true;
},

二、删除部门记录

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

<el-button
    size="medium"
    type="danger"
    :disabled="!isAuth(['ROOT', 'DEPT: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('dept/deleteDeptByIds', 'POST', { ids: ids }, true, function(resp) {
                if (resp.rows > 0) {
                    that.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1200,
                        onClose: () => {
                            that.loadDataList();
                        }
                    });
                } else {
                    that.$message({
                        message: '未能删除记录',
                        type: 'warning',
                        duration: 1200
                    });
                }
            });
        });
    }
},

写好了JS代码，接下来我们可以运行前后端项目，删除一个无用户的部门试一下。