上个小节我们用Swagger测试了删除普通用户，这节课我们来编写前端的JS代码，发出Ajax请求调用后端的Web方法，删除普通用户。

一、选中多条记录

在用户管理页面的表格中，我设置了复选框列，用户可以勾选多条记录。当用户勾选或者取消勾选记录的时候，都会触发@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>

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

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

二、删除用户记录

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

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

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('user/deleteUserByIds', '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
                    });
                }
            });
        });
    }
},

想要删除当前行的用户记录，用户可以点击行内右侧的删除按钮。

<el-button type="text"
           size="medium"
           :disabled="scope.row.root"
           v-if="isAuth(['ROOT', 'USER:DELETE'])"
           @click="deleteHandle(scope.row.id)">
  删除
</el-button>