Vue3 el-table @sort-change 获取排序字段值 - 完整教程

在 Vue3 中，使用@sort-change指令来监听 el-table 的排序变化事件，可以传递一个回调函数来处理排序变化事件。在回调函数中，你可以通过$event参数来获取排序字段的值。

示例代码如下：

<el-table
  :data="tableData"
  :default-sort="{prop: 'name', order: 'ascending'}"
  @sort-change="handleSortChange"
>
  ...
</el-table>

methods: {
  handleSortChange(sort) {
    // 获取排序字段的值
    const sortOrder = sort.order;
    const sortField = sort.prop;
    
    // 使用获取到的排序字段的值进行后续操作
    ...
  }
}

在handleSortChange方法中，通过sort.order和sort.prop来获取排序的顺序和字段名。你可以根据这些值来进行进一步的操作，比如发送请求获取排序后的数据等。