vue3中 el-table点击表头修改表格数据

在 Vue3 中，可以使用 `v-slot` 和 `@click` 指令来实现点击表头修改表格数据的功能。

首先，在 `<el-table>` 标签中添加 `@header-click` 监听器来捕获表头点击事件，并将其绑定到一个方法中：

<el-table :data="tableData" @header-click="handleHeaderClick">
  <!-- 表格列 -->
</el-table>

然后，在 `handleHeaderClick` 方法中获取到被点击的表头列的字段名，并根据需要修改表格数据。例如，可以按照表头列的升降序对表格数据进行排序，或者筛选出符合某些条件的数据。

methods: {
  handleHeaderClick(column) {
    // 获取被点击的表头列的字段名
    const prop = column.property;

    // 根据字段名进行表格数据的修改操作
    // 例如，按照升降序对表格数据进行排序
    this.tableData.sort((a, b) => a[prop] - b[prop]);
  }
}

最后，可以在需要修改表格数据的表头列上使用 `v-slot` 和 `@click` 指令来添加点击事件。例如，下面的代码演示了如何在“操作”列上添加一个“删除”按钮，点击该按钮后删除对应的行数据：

<el-table :data="tableData" @header-click="handleHeaderClick">
  <el-table-column label="姓名" prop="name"></el-table-column>
  <el-table-column label="年龄" prop="age"></el-table-column>
  <el-table-column label="操作">
    <template v-slot:header>
      <span>操作</span>
      <span @click="handleDeleteAll">全部删除</span>
    </template>
    <template v-slot="scope">
      <el-button @click="handleDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

其中，`handleDeleteAll` 方法可以用来删除所有行数据，而 `handleDelete` 方法则可以用来删除单个行数据。

methods: {
  handleHeaderClick(column) {
    // 获取被点击的表头列的字段名
    const prop = column.property;

    // 根据字段名进行表格数据的修改操作
    // 例如，按照升降序对表格数据进行排序
    this.tableData.sort((a, b) => a[prop] - b[prop]);
  },
  handleDelete(row) {
    // 从表格数据中删除指定行数据
    const index = this.tableData.indexOf(row);
    if (index !== -1) {
      this.tableData.splice(index, 1);
    }
  },
  handleDeleteAll() {
    // 删除所有行数据
    this.tableData = [];
  }
}