Vue点击列排序时如何清除非点击列的sortcol值？

你只需要修改sortByColumn方法，在处理当前列的排序状态前，先重置所有列的排序状态为空，再根据当前列的旧状态切换新值即可：

methods: {
  sortByColumn(column) {
    // 保存当前列的旧排序状态
    const oldStatus = this.sortcol[column]
    // 重置所有列的排序状态为空
    Object.keys(this.sortcol).forEach(key => {
      this.sortcol[key] = ''
    })
    // 根据旧状态切换当前列的新状态
    if (oldStatus === '') {
      this.sortcol[column] = 'asc'
    } else if (oldStatus === 'asc') {
      this.sortcol[column] = 'desc'
    }
    // 若旧状态是desc，重置后保持为空即可，无需额外操作
  },
}

额外优化点 #

你现在手动维护sortcol的列属性容易遗漏（比如columns里有id列，但sortcol中未定义），可以在组件创建时自动生成sortcol：

export default {
  // ...其他代码
  created() {
    this.sortcol = this.columns.reduce((result, col) => {
      result[col.name] = ''
      return result
    }, {})
  }
}

这样后续新增列时，无需手动修改sortcol，自动同步列配置。

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