vue-good-table自定义排序问题：点击列头切换至none状态时恢复初始排序配置

我帮你搞定这个需求！其实你已经走对路了，用@on-sort-change事件是正确的方向，接下来只需要通过表格实例手动触发默认排序即可。下面是具体的实现步骤：

步骤1：给表格添加ref引用 #

首先在你的<vue-good-table>标签上加上ref属性，这样我们就能获取到表格的实例，调用它的排序方法：

<vue-good-table 
  ref="goodTable" <!-- 添加这行 -->
  :columns="columns" 
  :rows="rows" 
  styleClass="vgt-table condensed striped bordered" 
  :sort-options="sortOptions" 
  :search-options="searchOptions" 
  :select-options="selectOptions" 
  @on-selected-rows-change="selectionChanged"
  @on-sort-change="onSortChange"
>
</vue-good-table>

步骤2：完善onSortChange方法 #

在你的方法里，当检测到排序类型为none时，通过ref获取表格实例，然后调用它的sort方法，传入你初始定义的排序规则：

onSortChange(params) {
  const currentSort = params[0];
  console.log('on-sort-change:', currentSort.field, currentSort.type);
  
  if (currentSort.type === 'none') {
    console.log("Reverting to default sort (date descending)");
    // 获取表格实例
    const tableInstance = this.$refs.goodTable;
    // 调用sort方法，传入初始排序配置
    tableInstance.sort([{
      field: this.sortOptions.initialSortBy.field,
      type: this.sortOptions.initialSortBy.type
    }]);
  }
}

步骤3：确保sortOptions是响应式的 #

确认你的sortOptions是定义在data里的响应式数据（而不是普通变量），这样我们能直接复用初始配置：

data() {
  return {
    sortOptions: {
      enabled: true,
      initialSortBy: { field: "date", type: "desc" },
    },
    // 其他数据（rows、searchOptions等）...
  }
},
// 你的columns计算属性保持不变
computed: {
  columns() {
    return [
      { label: "Name", field: "name" },
      { 
        label: "CreationDate", 
        field: "date", 
        type: "date", 
        formatFn: (value) => value != null ? moment(value).format('YYYY-MM-DD') : null,
        sortFn(x, y) {
          const xMoment = moment(x);
          const yMoment = moment(y);
          return xMoment.unix() < yMoment.unix() ? -1 : xMoment.unix() > yMoment.unix() ? 1 : 0;
        },
      },
    ]
  }
},

原理说明 #

当你点击列头切换到none排序状态时，on-sort-change事件会被触发。我们通过ref拿到表格实例后，调用它的sort方法，传入我们想要的排序参数，就能强制表格回到初始的date列降序排序状态，覆盖掉none的状态。

这样就能完美实现你想要的效果：无论点击哪个列头导致排序变为none，表格都会自动回到默认的按日期降序排列。

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