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

需求如题，当我们拿到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: [],
    }
}

 定义方法

1. 给每行增加index参数，值为下标
2. 选中复选框时，将下标装进checkedData
3. 过滤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决定保留还是丢弃该元素。