如何将Vuetify.js Data Table初始状态设置为未排序？

当然可以指定Vuetify Data Table的初始排序方式，要实现初始未排序的状态其实非常简单——默认情况下组件会自动把第一列设为排序列，我们只需要通过两个props覆盖这个默认行为就行：

• 使用sort-by props并将其设置为空数组[]，明确告诉组件一开始没有指定任何排序列
• 配合sort-desc props设置为false（或空数组），确认初始没有排序方向

模板示例 #

<v-data-table
  :items="yourTableItems"
  :headers="yourTableHeaders"
  :sort-by="[]"
  :sort-desc="false"
>
  <!-- 自定义列内容（如果需要） -->
</v-data-table>

脚本部分（以Vue 3组合式API为例） #

如果需要后续动态调整排序状态，可以用响应式变量来控制：

import { ref } from 'vue';

// 模拟表格数据
const yourTableItems = ref([
  { id: 1, title: 'Item 1', value: 10 },
  { id: 2, title: 'Item 2', value: 20 },
  { id: 3, title: 'Item 3', value: 5 }
]);

// 表头配置
const yourTableHeaders = ref([
  { text: 'ID', value: 'id' },
  { text: '标题', value: 'title' },
  { text: '数值', value: 'value' }
]);

// 控制初始排序状态的响应式变量
const sortBy = ref([]);
const sortDesc = ref(false);

然后在模板中绑定这些变量：

<v-data-table
  :items="yourTableItems"
  :headers="yourTableHeaders"
  :sort-by="sortBy"
  :sort-desc="sortDesc"
>
</v-data-table>

这样设置后，表格加载完成后就会保持未排序的初始状态，不会自动给第一列加上排序标记。之后如果需要通过代码触发排序，只需要更新sortBy和sortDesc的值即可。

内容的提问来源于stack exchange，提问作者Kong