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

在 Vue3 中，可以使用 `@header-click` 事件来监听表头点击事件，然后在事件处理函数中修改表格数据。具体操作步骤如下：

1. 在 `<el-table>` 组件上添加 `@header-click` 事件监听器：

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

2. 在 Vue 实例中定义 `handleHeaderClick` 方法来处理表头点击事件：

export default {
  data() {
    return {
      tableData: [/* 表格数据 */]
    }
  },
  methods: {
    handleHeaderClick(column, event) {
      // 获取点击的表头列名
      const columnName = column.property;
      // 修改表格数据
      this.tableData.forEach(row => {
        row[columnName] = /* 新的值 */;
      });
    }
  }
}

在 `handleHeaderClick` 方法中，我们可以通过 `column.property` 来获取点击的表头列名，然后遍历表格数据并修改相应的值即可。注意，这里我们直接修改了原始的表格数据，因此界面会自动更新。