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

在Vue3中，可以通过监听el-table的sort-change事件来实现点击表头修改表格数据的功能。具体步骤如下：

1. 在el-table组件上添加sort-change事件监听器，并绑定一个处理函数。

<el-table :data="tableData" @sort-change="handleSortChange">
  <!-- 表格列 -->
</el-table>

2. 在处理函数中根据表头的排序状态修改表格数据。

methods: {
  handleSortChange({column, prop, order}) {
    if (order === 'ascending') {
      this.tableData.sort((a, b) => a[prop] - b[prop]);
    } else if (order === 'descending') {
      this.tableData.sort((a, b) => b[prop] - a[prop]);
    } else {
      this.tableData.sort((a, b) => a.id - b.id);
    }
  }
}

在这个示例中，我们通过判断排序状态来修改表格数据。当表头按升序排列时，我们按照指定属性升序排列表格数据；当表头按降序排列时，我们按照指定属性降序排列表格数据；当排序状态被清除时，我们恢复表格数据的默认排序。你可以根据自己的需求修改处理函数的具体实现。