elementplus表单项批量删除

Element Plus 是 Vue 3 的官方 UI 框架 Element UI 的升级版，它提供了丰富的组件库和易用的API。对于表单项的批量删除，Element Plus 中的 `el-table` 组件通常会配合 `el-checkbox` 或者 `el-tree` 这样的复选框组件一起使用。以下是一个简单的步骤：

1. 首先，在需要支持批量操作的表格上，添加 `action-col` 列，用于显示删除按钮或图标。

<template>
  <el-table :data="tableData" highlight-current-row>
    <el-column type="index"></el-column>
    <!-- 其他列 -->
    <el-column type="actions">
      <template slot-scope="scope">
        <el-button @click.stop="deleteItems(scope.$index)" size="small">删除</el-button>
      </template>
    </el-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 初始化数据
      selectedRows: [] // 存储被选中的行索引
    };
  },
  methods: {
    deleteItems(index) {
      if (this.selectedRows.includes(index)) {
        this.selectedRows = this.selectedRows.filter(i => i !== index);
      } else {
        this.selectedRows.push(index);
      }
      // 当用户点击确认删除时，可以在这里执行删除操作
      // this.tableData.splice(...); // 使用数组的splice方法删除选定的行
    }
  }
};
</script>

在这个例子中，当点击“删除”按钮，会选择对应行，并在用户完成选择后执行删除操作。请注意，实际的删除操作需要在用户的确认环节中处理，防止误操作。