vue中异步批量删除列表数据

业务：设备列表，根据选中的复选框批量删除数据

vue中template里面代码：

 <!-- 设备列表 -->
    <el-table :data="eTableData" style="width: 100%;" border  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="equipmentName" label="设备名称" sortable align="center"></el-table-column>
      <el-table-column prop="equipmentId" label="设备编号" sortable align="center"></el-table-column>
      <el-table-column prop="typeSpecification" label="型号规格" sortable align="center"></el-table-column>
      <el-table-column prop="categoryId" label="类目编号" sortable align="center"></el-table-column>
      <el-table-column prop="addressId" label="所在区域" sortable align="center">
        <template slot-scope="scope">
          {{ scope.row.addressId === 4 ? '办公区 ':''}}
          {{ scope.row.addressId === 5 ? '休息区 ':''}}
        </template>
      </el-table-column>
      <el-table-column prop="manufacturerNum" label="厂家编号" sortable align="center"></el-table-column>
      <el-table-column prop="manufacturerType" label="厂家型号" sortable align="center"></el-table-column>
      <el-table-column prop="price" label="价格" sortable align="center"></el-table-column>
      <el-table-column prop="buyTime" label="购置日期" sortable align="center"></el-table-column>

      <el-table-column label="操作" width="190" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

javaScript代码

data() {
    return {
      eTableData:[],//列表数据来源
      selectedRows:[],//用于存储选中的行
      selectedRowIds:[],//用于存储选中的ID
    }
  },

methods: {

      //处理选中的行
    handleSelectionChange(selected){
      this.selectedRows = selected; // 更新选中的行
      this.selectedRowIds = this.selectedRows.map(row => row.id); // 获取 ID 数组
    },
 async deleteSelectedRows(){
      if (this.selectedRowIds.length === 0) {
        this.$message.warning("请先选择要删除的项");
        return;
      }
      try {
        // 调用 eDelete 方法并传入选中的 ID
        await eDelete(this.selectedRowIds);

        // 更新表格数据，移除已删除的行
        this.eTableData = this.eTableData.filter(item => !this.selectedRowIds.includes(item.id));

        // 清空选中状态
        this.selectedRows = [];
        this.selectedRowIds = [];

        this.$message.success("删除成功");
      } catch (error) {
        console.error("删除失败:", error);
        this.$message.error("删除失败，请稍后再试");
      }
    },
    
},

api包下的 js 代码

// 根据选中行ID删除
export function eDelete(ids) {
  return request({
    data: ids,
    method: 'delete',
    url: '/dms/eDelete'
  })
}

后台控制层：

    /**
     * 功能：设备删除
     */
    @DeleteMapping("/eDelete")
    public R eDelete(@RequestBody List<String> ids) {
        eService.eDelete(ids);
        return R.ok();
    }

Service:

void eDelete(List<String> ids);

ServiceImpl:

    @Override
    public void eDelete(List<String> ids) {
        esMapper.eDelete(ids);
    }

Mapper：

void eDelete(@Param("ids") List<String> ids);

Mapper.xml：

    <delete id="eDelete" parameterType="java.util.List">
        DELETE FROM t_equipment
        WHERE id IN
        <foreach item="id" collection="ids" open="(" separator="," close=")">
            #{id}
        </foreach>
    </delete>