上个小节我们用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" header-align="center" align="center" width="50" />
    ……
</el-table>

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

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

二、删除部门记录

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

<el-button
    size="medium"
    type="danger"
    :disabled="!isAuth(['ROOT', 'MEETING_ROOM: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('meeting_room/deleteMeetingRoomByIds', '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
                    });
                }
            });
        });
    }
},