iview table的sort排序显示不对

Question

我每点一下，他都会触发一次，这个没有问题。但是我每点3次都会有一次

上下都置灰的状态？这个怎么处理，每次点击都是上下切换的？？

Answer 1

默认的情况下是三个状态进行切换，你可以自定义状态，写排序逻辑。文档

Answer 2

这种设计才是正确的交互体验，不然想取消排序怎么操作？目前绝大多数表格排序也都是这种设计。

你的需求属于特殊需求，那就需要特殊对待，光靠看文档已经解决不了了，因为文档只给出了on-sort-change事件，显然这个是改变事件，不能作为前提条件影响排序，所以我看了下源码，发现点击表头会触发表格的handleSort方法

所以我们可以在on-sort-change事件中调用table组件中的handleSort来手动排序

sortChange(data){
    //如果点击后排序为normal，即无排序，就手动排序为asc
    if(data.order == 'normal'){
      let index = -1
      //handleSort需要index参数来确定是第几列，使用columns和data.column的key值对比来查询
      this.columns.some((item, i) => {
        if(item.key == data.column.key){
          index = i
          return true
        }
      });
      //index不为-1，则手动调用handleSort，这里this.$refs.table指向表格组件，需要在表格中写ref
      ~index && this.$refs.table.handleSort(index, 'asc')
    }
}