el-table 获取选中元素，根据下标删除

武当王也拜见老天师

已于 2023-04-11 15:52:29 修改

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 vue elementui

于 2023-04-11 15:24:32 首次发布

本文链接：https://blog.csdn.net/Oct_Somnus/article/details/130083831

文章介绍了在Vue.js中，当表格数据不包含index时，如何利用row-class-name属性为每一行添加自定义索引。同时展示了如何处理选中数据，包括在选中复选框时存储行的index，以及在执行删除操作时，使用filter方法过滤并更新列表数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求如题，当我们拿到table数据的时候，对象里是不带有index下标的，所以我们可以使用row-class-name这个属性为每行的对象增加一个index。

页面创建一个table

<template>
    <el-table 
        :data="dataList" 
        :row-class-name="rowDataIndex" 
        @selection-change="handleDataSelectionChange"
    >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="编号" align="center" prop="num" />
        <el-table-column label="名称" align="center" prop="name" />
    </el-table>
    <el-button type="danger" icon="el-icon-delete" size="mini"
        @click="handleDeleteData">删除选中行</el-button>
</template>

声明列表数据，选中数据变量

data() {
    return {
      // 列表数据
      dataList: [],
      // 选中数据
      checkedData: [],
    }
}

定义方法

给每行增加index参数，值为下标
选中复选框时，将下标装进checkedData
过滤checkedData中的下标，更新列表数据

methods: {
    /** 维护序号 */
    rowDataIndex({ row, rowIndex }) {
      // 给每行增加index参数，值为下标
      row.index = rowIndex + 1;
    },
    /** 复选框选中数据 */
    handleDataSelectionChange(selection) {
      // 将下标装进checkedData
      this.checkedData = selection.map(item => item.index)
    },
    /** 删除按钮操作 */
    handleDeleteData() {
      if (this.checkedData.length == 0) {
        this.$modal.msgError("请先选择要删除的数据");
      } else {
        const dataList = this.dataList;
        const checkedData = this.checkedData;
        // 筛选不在checkedData中的下标，更新列表数据
        this.dataList = dataList.filter(function(item) {
          return checkedData.indexOf(item.index) == -1
        });
      }
    },
}

filter()是一个常用的操作，用于把数组的某些元素的筛选，然后返回剩下的元素。和map()类似，filter()也接收一个数组。和map()不同的是，filter()把传入的数组中的集合依次筛选每个符合条件的集合，然后根据返回值是true还是false决定保留还是丢弃该元素。