el-table 实现多选删除

el-table 实现多选删除

实现 el-table 的多选删除功能，可以通过以下步骤进行：

• 获取选中行数据：通过 handleSelectionChange 方法获取选中的行数据1。
• 设置多选列：在 el-table-column 中设置 type 属性为 selection 来启用多选功能25。
• 绑定数据源：将数据源绑定到 el-table 组件上9。
• 实现删除操作：结合 Element UI 的 el-table 和其他组件，如 el-button，来实现删除操作78。

具体实现代码示例可能如下：

<template>
  <el-table :data="tableData" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- 其他列 -->
    <el-table-column>
      <template slot-scope="scope">
        <el-button @click="deleteRow(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...], // 绑定的数据源
      multipleSelection: [] // 存储选中的行
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteRow(row) {
      // 删除操作，可以根据业务逻辑来实现
    }
  }
};
</script>

通过上述步骤和代码示例，可以在 el-table 中实现多选删除功能。125789