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

一、选中多条记录

在amect_type.vue页面的表格中，我设置了复选框列，用户可以勾选多条记录。当用户勾选或者取消勾选记录的时候，都会触发@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.canDelete == 'true') {
        return true;
    }
    return false;
},

二、删除罚款类型记录

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

<el-button size="medium" type="danger" @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('amect_type/deleteAmectTypeByIds', '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
                    });
                }
            });
        });
    }
},

要删除当前行的用户记录，用户可以点击行内右侧的删除按钮，调用的还是deleteHandle()函数。

<el-button
    type="text"
    size="medium"
    :disabled="scope.row.canDelete == 'false'"
    @click="deleteHandle(scope.row.id)"
>
    删除
</el-button>

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