vue3中使用el-table-column sortable对数据进行排序-如何将用户的选择回显到table上显示状态

element-plus

当通过其他设置改变了排序条件后，显示表格需要对应改变筛选状态 

在模板中，使用sortable属性将表格列设置为可排序，并绑定一个变量来保存排序的状态

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" sortable :sort-orders="['ascending', 'descending']" :sort-by="sortColumn" @sort-change="handleSortChange"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

在上面的示例中，我们将名为"name"的列设置为可排序，并使用:sort-orders属性指定排序顺序，:sort-by属性绑定一个变量来保存当前排序的列，@sort-change事件监听排序变化。

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 28 },
        { name: 'Jane', age: 32 },
        { name: 'Bob', age: 25 },
      ],
      sortColumn: null,
    };
  },
  methods: {
    handleSortChange({ prop, order }) {
      this.sortColumn = prop;
      // 在这里处理排序的逻辑
      // 可以根据prop和order来对数据进行排序
      this.sortData(prop, order);
    },
    sortData(prop, order) {
      // 根据prop和order对数据进行排序的逻辑
      // 更新tableData中的数据排序
    },
  },
};
</script>

上面的代码中，我们使用ref创建了一个名为sortColumn的响应式变量，用于保存当前排序的列。在handleSortChange方法中，我们更新sortColumn的值，并调用sortData方法来处理排序的逻辑。您可以根据prop和order的值来对数据进行相应的排序操作。

请注意，代码中的排序逻辑是示例代码，您需要根据自己的需求和数据结构进行相应的实现，并更新tableData中的数据排序。