Vue更改elmentui table排序

因项目需要，更改elementui table排序方式，默认的风格为以下：点击正三角按钮，为从小到大排序；点击倒三角按钮，为从大到小排序；点击三角以外的表头区域，排序会在正序，倒序，默认三种状态切换。

需求为以下：

1. 默认的图标需求方不满意，需要修改为更明确的指示方式，换图标
2. 从后端请求的数据默认按照日期升序，前端在起始时候需要设定第一列状态为升序
3. 对于任意一列只保留升序与降序两种状态，点击表头任意区域均能切换

分析一下为了实现这个需求的思路

1. 默认图标的更换，css隐藏原有图标，升降序从iconfont上找现成的，用render header写自定义表头加上图标
2. 后端默认按日期升序下发数据如果用原本的图标，可以直接设置table的default-sort属性设置加载时默认的某一列的升序或降序。但是已经使用新图标的情况下，需要根据实际情况写逻辑，让第一列的默认排序显示为升序的状态
3. 状态设置可以在sort-orders设置为[‘ascending’, ‘descending’]，这样在点击表头任意区域（包括图标）时，只会进行升序和降序的切换，js写两种图标更换的逻辑，点击升降序图标不用加事件

默认的排序图标元素在class为caret-wrapper的元素中，隐藏原有排序图标

 .caret-wrapper {
   display: none!important;
 }

表头:render-header绑定方法，i标签中为图标，table初始加载时全部为升序图标，第一列日期设置为蓝色代表激活，其他列灰色代表未激活

renderH (h, {column, $index}) {
  if (column.property === 'date') {
    return (
      <div class="tableheader">
        <span>{ column.label }</span>
        <i class="iconfont iconjiantou-copy" style="color:#409eff;"></i>
      </div>
    )
  } else {
    return (
      <div class="tableheader">
        <span>{ column.label }</span>
        <i class="iconfont iconjiantou-copy" style="color:#c0c4cc;"></i>
      </div>
    )
  }
}

给每一列加上:sort-orders="[‘ascending’, ‘descending’]"，让列排序只有升序、降序两种状态
剩下只剩图标的切换逻辑。首先，需要有图标重置的逻辑，当点击任意排序时，需要将所有列重置为灰色的图标状态，在这基础上操作当前列的排序图标；其次，对于非日期列，比较简单，根据当前排序时ascending或descending来设置图标和样式即可；最后，对于日期列的排序，比较复杂，要分为两种情况：

1. 如果是table渲染后，已经点击了其他列的排序，再来点击日期列，这个时候的排序，和其他列逻辑一样
2. 如果是table渲染后，直接点击日期列的排序，这时候图标显示的为升序生效状态，我们预期的是当我们第一次点击排序时，应该为降序descending排序，第二次点击排序时为升序ascending排序，但是在:sort-orders="[‘ascending’, ‘descending’]"的情况下，与预期相反，而我们又不能调整sort-orders为[‘descending’, ‘ascending’]，这样虽然这种情况是好的，但是再点击别的列排序再回来点击日期列时就不对了。所以我们只能在渲染后直接点击日期排序情况做特殊处理，ascending做倒序排序，descending做升序排序；当点击别的列排序再点击日期列时，做正常排序处理。

绑定到@sort-change的方法如下：

tableSort ({column, prop, order}) {
  // 排序图标
  var icons = document.getElementsByClassName('tabledata')[0].getElementsByClassName('iconfont')
  // 先重置所有图标
  for (var i = 0; i < icons.length; i++) {
    icons[i].className = 'iconfont iconjiantou-copy'
    icons[i].style.color = '#c0c4cc'
  }
  // needSortRevert为判断是否渲染表格后直接点击日期列
  if (column.property === 'date' && this.needSortRevert) {
    if (order) {
      if (order === 'descending') {
        // 升序
        document.getElementsByClassName(column.id)[0].getElementsByClassName('iconfont')[0].style.color = '#409eff'
      } else {
        // 降序
        document.getElementsByClassName(column.id)[0].getElementsByClassName('iconfont')[0].className = 'iconfont iconjiantou'
        document.getElementsByClassName(column.id)[0].getElementsByClassName('iconfont')[0].style.color = '#409eff'
      }
    }
  } else {
    if (column.property !== 'date' && this.needSortRevert) {
      this.needSortRevert = false
    }
    if (order) {
      if (order === 'ascending') {
        // 升序
        document.getElementsByClassName(column.id)[0].getElementsByClassName('iconfont')[0].style.color = '#409eff'
      } else {
        // 降序
        document.getElementsByClassName(column.id)[0].getElementsByClassName('iconfont')[0].className = 'iconfont iconjiantou'
        document.getElementsByClassName(column.id)[0].getElementsByClassName('iconfont')[0].style.color = '#409eff'
      }
    }
  }

  if (column.property === 'date' && this.needSortRevert) {
    this.tableData.sort((a, b) => {
      if (order === 'descending') {
        // 升序
        if (a[prop] < b[prop]) {
          return -1
        } else if (a[prop] > b[prop]) {
          return 1
        } else {
          return 0
        }
      } else {
        // 降序
        if (a[prop] < b[prop]) {
          return 1
        } else if (a[prop] > b[prop]) {
          return -1
        } else {
          return 0
        }
      }
    })
  } else {
    this.tableData.sort((a, b) => {
      if (order === 'ascending') {
        // 升序
        if (a[prop] < b[prop]) {
          return -1
        } else if (a[prop] > b[prop]) {
          return 1
        } else {
          return 0
        }
      } else {
        // 降序
        if (a[prop] < b[prop]) {
          return 1
        } else if (a[prop] > b[prop]) {
          return -1
        } else {
          return 0
        }
      }
    })
  }
}