vue3+element-plus表格默认排序default-sort失效问题

在Vue 3和Element Plus中，如果遇到表格默认排序（default-sort）失效的问题，可能是因为以下原因：

1. 数据源问题：确保你传递给表格的数据源已经包含排序所需的字段和顺序。
2. 列定义问题：检查列定义是否正确设置了sortable属性，并且sort-method或sort-by（如果使用）是否已正确实现。
3. 版本兼容性问题：确保Element Plus的版本与Vue 3兼容。
4. 错误的事件监听：如果你自己实现了排序逻辑，请确保你没有覆盖或错误处理了Element Plus提供的排序事件。

解决方法：

1. 确保数据源包含排序字段和顺序。
2. 在列定义中正确设置sortable属性，并提供sort-change事件处理函数。
3. 更新Element Plus到与Vue 3兼容的版本。
4. 如果自定义了排序逻辑，请确保不要覆盖Element Plus的默认排序行为。

示例代码：

<template>
  <el-table
    :data="tableData"
    @sort-change="handleSortChange"
    default-sort="{prop: 'date', order: 'descending'}"
  >
    <el-table-column
      prop="date"
      label="日期"
      sortable="custom"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable="custom"
    ></el-table-column>
    <!-- 其他列定义 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  // 数据对象，确保包含date和name字段
]);
 
const handleSortChange = ({ column, prop, order }) => {
  // 实现自定义排序逻辑，或使用Element Plus提供的排序功能
  tableData.value.sort((a, b) => {
    if (order === 'ascending') {
      return a[prop] > b[prop] ? 1 : -1;
    } else if (order === 'descending') {
      return a[prop] < b[prop] ? 1 : -1;
    }
    return 0;
  });
};
</script>

在这个示例中，我们定义了一个表格，并通过default-sort指定了默认的排序字段和顺序。同时，我们监听了sort-change事件来实现自定义的排序逻辑，确保表格能够按照预期工作。如果不需要自定义排序，可以省略handleSortChange函数，使用Element Plus提供的排序功能。