el-table批量删除没有唯一标识的数据

扶苏1002

于 2024-03-29 09:41:10 发布

阅读量325

点赞数 3

分类专栏： ElementUI 文章标签： vue.js elementUI

本文链接：https://blog.csdn.net/qq_44741577/article/details/137133507

版权

ElementUI 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了在Vue前端中，由于表格行数据缺乏唯一标识，如何通过`row-class-name`属性为每一行添加索引，以及如何在`selection-change`事件中处理多选删除，实现不依赖唯一标识的批量行数据删除操作。

摘要由CSDN通过智能技术生成

需求描述

前端本地批量删除表格行数据，但是行数据没有唯一标识符

在这里插入图片描述

要获取唯一id标识，才能找到勾选中的，这里数据没有标识，那么就只能根据下标来了，但是@selection-change是直接获取不到index下标的，所以只能用:row-class-name。

<el-table
  :data="tableData"
  @selection-change="handleSelectionChange"
  :row-class-name="tableRowClassName"
></el-table>

//row-class-name添加下标
tableRowClassName(row, index) {
  row.row.index = row.rowIndex;
},
handleSelectionChange(val) {
  this.multipleSelection = val;
},
delinfo() {
  this.multipleSelection.forEach((item) => {
    this.tableData = this.tableData.filter(
      (items) => items.index !== item.index
    );
  });
},