上个小节我们用Swagger测试了删除罚款记录，一次删除多条记录也是可以的，只要是未支付的罚款都可以删除。这节课我们要写前端的代码，把删除功能最后给完善了。

一、实现多条记录选中

在amect.vue页面的表格中，第一列是复选框，我们可以选中多条记录。

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

我们要实现selectable()函数，在函数中我们要判断只能选中未缴纳状态的罚款记录。

selectable: function(row, index) {
    if (row.status != '已缴纳') {
        return true;
    }
    return false;
},

我们还要实现selectionChangeHandle()函数，用来保存表格中哪些记录被选中了。

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

二、编写JS代码删除数据

在amect.vue页面中，有两处删除按钮，一个用来删除复选框选中的记录；另一个用来删除表格中当前行的记录。而且这两个按钮都是调用deleteHandle()函数，这就好办了，只需要我们实现这个函数即可。

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

……

<el-button
    type="text"
    size="medium"
    :disabled="!(isAuth(['ROOT', 'AMECT:DELETE']) && scope.row.status != '已缴纳')"
    @click="deleteHandle(scope.row.id)"
>
    删除
</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('amect/deleteAmectByIds', '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
                    });
                }
            });
        });
    }
},