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

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

vue中template里面代码:

javascript 复制代码
 <!-- 设备列表 -->
    <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代码

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

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

后台控制层:

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

Service:

java 复制代码
void eDelete(List<String> ids);

ServiceImpl:

java 复制代码
    @Override
    public void eDelete(List<String> ids) {
        esMapper.eDelete(ids);
    }

Mapper:

java 复制代码
void eDelete(@Param("ids") List<String> ids);

Mapper.xml:

java 复制代码
    <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>
相关推荐
00后程序员张2 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
gplitems1235 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木7 小时前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_768350237 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:8 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
华洛9 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼9 小时前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔9 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗9 小时前
【React】TimePicker进阶:解决开始时间可大于结束时间的业务场景与禁止自动排版
javascript·react.js·ant design
今天头发还在吗9 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架