Vuetify技术问题：如何重置v-data-table的列排序状态

要实现外部按钮重置v-data-table的排序状态，核心是通过绑定sort-by和sort-desc两个props手动控制排序逻辑，具体步骤如下：

1. 声明排序控制变量
   在组件data中定义用于控制排序状态的变量，初始值设为无排序状态：

data() {
  return {
    headers: [
      {
        text: 'Name',
        sortable: true,
        value: 'name',
      },
      {
        text: 'Age',
        sortable: false,
        value: 'number',
      },
    ],
    sortBy: null, // 控制当前排序字段，初始无排序
    sortDesc: false, // 控制排序方向，默认升序
    items: [/* 你的数据列表 */]
  }
}

2. 绑定表格排序props
   将sort-by和sort-desc绑定到上述变量，同时监听排序更新事件同步用户操作后的状态：

<v-data-table
  :headers="headers"
  :items="items"
  :sort-by="sortBy"
  :sort-desc="sortDesc"
  @update:sort-by="sortBy = $event"
  @update:sort-desc="sortDesc = $event"
></v-data-table>

3. 添加重置按钮与方法
   创建外部按钮，点击时重置排序控制变量到初始状态：

<v-btn @click="resetSort">重置排序</v-btn>

对应的重置方法：

methods: {
  resetSort() {
    this.sortBy = null;
    this.sortDesc = false;
  }
}

额外说明 #

如果你的场景支持多列排序，只需将重置逻辑改为：

resetSort() {
  this.sortBy = [];
  this.sortDesc = [];
}

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