29.批量删除功能开发

效果图

后端

ai 提示词

写一个批量删除的功能

// 批量删除
    @PostMapping("/batchDelete")
    public ResultVo batchDelete(@RequestBody List<Integer> userIds) {
        service.batchDelete(userIds);
        return ResultVo.success("删除成功");
    }

前端

ai 提示词：

加一个批量删除的功能，复选框选中后点击批量删除就调用后端接口，如果复选框中一个都没选中的话就提示至少选中一项

1. 首先在el-table组件中添加多选功能，在第一个el-table-column前添加：

<el-table
  :data="tableData"
  style="width: 100%"
  @selection-change="handleSelectionChange">
  <el-table-column
    type="selection"
    width="55">
  </el-table-column>

1. 在批量导入按钮后添加批量删除按钮：

<el-button size="small" type="warning" @click="exportDev()">导出excel</el-button>
<el-button size="small" type="danger" @click="batchDelete()">批量删除</el-button>

1. 在data中添加存储选中行的数据：

multipleSelection: []

1. 在methods中添加以下方法：

handleSelectionChange(val) {
  this.multipleSelection = val;
},
batchDelete() {
  if(this.multipleSelection.length === 0) {
    this.$message.warning('请至少选择一条数据');
    return;
  }
  this.$confirm('此操作将永久删除所选开发员, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let ids = this.multipleSelection.map(item => item.id);
    deleteDevUsers(ids).then(res => {
      this.$message.success(res.mess);
      this.getPage();
    });
  }).catch(() => {
    this.$message.info('已取消删除');
  });
}

1. 在script标签顶部添加API导入：

import {deleteDevUsers} from "@/api/app";