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

在 Vue3 中，我们可以使用 `@cell-click` 和 `@header-click` 监听 `el-table` 的单元格和表头的点击事件，然后在事件处理函数中修改表格数据。

下面是一个简单的示例代码：

<el-table :data="tableData" @cell-click="handleCellClick" @header-click="handleHeaderClick">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="gender" label="性别"></el-table-column>
</el-table>

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 22, gender: '女' },
        { name: '王五', age: 24, gender: '男' }
      ]
    }
  },
  methods: {
    handleCellClick(row, column, event) {
      // 处理单元格点击事件
      // row：当前行的数据对象
      // column：当前列的数据对象
      // event：原生的 click 事件

      // 修改数据
      row[column.prop] = 'newValue'
    },
    handleHeaderClick(column, event) {
      // 处理表头点击事件
      // column：当前列的数据对象
      // event：原生的 click 事件

      // 修改数据
      this.tableData.forEach(row => {
        row[column.prop] = 'newValue'
      })
    }
  }
}

在 `handleCellClick` 函数中，我们可以通过 `row[column.prop]` 来获取或修改当前单元格的数据，其中 `row` 是当前行的数据对象，`column` 是当前列的数据对象，`column.prop` 是当前列绑定的字段名。

在 `handleHeaderClick` 函数中，我们可以遍历表格数据并修改指定列的数据。同样的，我们也可以通过 `column.prop` 来获取或修改当前列的数据。

需要注意的是，如果使用了 `v-model` 来绑定表格数据，修改数据时需要通过 `$set` 方法来触发更新，示例代码如下：

this.$set(row, column.prop, 'newValue')