element el-table表格的多选删除

项目场景：

element表格多选后删除的问题

---

问题描述

element表格事件selection-change参数竟然没有index。

---

解决方案：

仔细研究element官网文档发现el-table提供了row-class-name自定义，那就定义个index出来。

 具体实例代码：

<template>
  <div class="">
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :row-class-name="rowClassName"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="onMultipleDel()">删除</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      multipleSelection: [],
      multipleSelectAry: []
    };
  },
  methods: {
    rowClassName(row, index) {
      row.row.index = row.rowIndex;
    },
    handleSelectionChange(rows) {
      this.multipleSelection = rows;
      rows.forEach((item) => {
        this.multipleSelectAry.push(item.index);
      });
    },
    onMultipleDel() {
      if (this.multipleSelectAry.length == 0) {
        this.$message.error("请选择要删除的数据");
      }
      this.tableData = this.tableData.filter((item, index) => {
        return !this.multipleSelectAry.includes(index);
      });
    }
  }
};
</script>

每天记录一点，助力成长！

欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。

如果你觉得本文对你有帮助，欢迎点赞收藏转载，烦请注明出处，谢谢！