如何基于Vue实现批量删除

1.第一步我们需要添加一个批量删除的按钮，并且底色为红色。

<el-button type="danger" @click="handleBatchDelete()">批量删除</el-button>

type设置了危险样式(红色，一般是删除)。

@click代表点击按钮后使用的方法。

2.第二步我们需要根据自己的表单添加复选框

<el-table-column type="selection" width="50" align="center"></el-table-column>

这一步需要注意你的<el-table>属性里是否添加了ref，例如

<el-table
    ......
    ref="demoTable"
    ......
>

这一步是保证我们可以拿到选中的行

3.第三步就是编写点击按钮后使用的方法

handleBatchDelete() {
      const selectedRows = this.$refs.demoTable.selection;
      if (selectedRows.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择需删除的记录'
        });
        return;
      }
      this.$confirm('您确定要批量删除选中的数据吗？', '批量删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        selectedRows.forEach(row => {
          // 在这一步通过你的表单获得行对应的索引,一般定义在Vue的data()中
          const index = this.yourData.indexOf(row);
          if (index !== -1) {
            this.headerData.splice(index, 1);
          }
        });

        this.$message({
          type: 'success',
          message: '批量删除成功'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消批量删除'
        });
      });
    },