element table表格实现多列排序并清除排序

业务需求如下

1.点击的单个进行排序时,要求isAsc对应当前字段的排序顺序;值ascending,descending,null三种情况;若指定了列对应的prop,没有指定order的话,默认ascending;

2.多列同时排序的话,要求isAsc对应最后点击的字段对应的排序顺序;orderByColumn字段格式

orderByColumn:'字段1+' '+字段1对应的排序顺序,字段2+' '+字段2对应的排序顺序,..最后点击的字段' 

诟病:可能存在的情况,取消其中一个字段的排序时,无法定位isAsc对应的值;

现实现的场景:isAsc,当取消某个字段的排序,默认定位到当前需要排序的数组中的最后一项对                        应的排序顺序;     

3.多列排序后,点击刷新,调用官方提供的clearSort(),只能清除最后点击的字段对应的高亮;

@sort-change事件：监听排序事件

<el-table
  :data="tableData"
  border
  @sort-change="handleSortChange"
  :header-cell-class-name="handleHeaderCellClass"
>
    <el-table-column
            label="云类型"
            align="center"
            prop="cloudType"
            sortable="custom"
          >
            <template slot-scope="{ row }">
              <span>{{ row.cloudType == 0 ? '专属云' : '合营云' }}</span>
            </template>
    </el-table-column>
</el-table>

注意:

@sort-change 事件：表格的排序条件发生变化的时触发，参数 { column, prop, order }, 分别代表的意义是：

column：当前列

prop：当前列需要排序的数据

order：排序的规则（升序、降序和默认[默认就是没排序]）

orderArray需要进行排序的列对应的字段和排序顺序

 //添加排序方法（可把多个字段共同加入排序）
    handleHeaderCellClass({ row, column, rowIndex, columnIndex }) {
      this.orderArray.forEach(element => {
        if (column.property === element.prop) {
          column.order = element.order
        }
      })
    },
  // 点击排序箭头
    handleSortChange({ column, prop, order }) {
      if (!order || this.sortField[prop] === order) {
        // 排序字段按触发顺序确定排列优先级，需要删除字段确保下次触发时位于最后优先级
        delete this.sortField[prop]
      } else {
        this.sortField[prop] = order
      }
      if (order) {
        //参与排序
        let flagIsHave = false
        this.orderArray.forEach(element => {
          if (element.prop === prop) {
            element.order = order
            flagIsHave = true
          }
        })
        if (!flagIsHave) {
          this.orderArray.push({
            prop: prop,
            order: order,
          })
        }
        this.curSort = order == 'descending' ? 'desc' : 'asc'
      } else {
        //不参与排序
        this.orderArray = this.orderArray.filter(element => {
          return element.prop !== prop
        })
        //取消当前的排序,curSort是当前点击项的前一项的order
        if (this.orderArray.length <= 0) {
          this.curSort = 'asc'
        } else {
          this.curSort =
            this.orderArray[this.orderArray.length - 1].order == 'descending'
              ? 'desc'
              : 'asc'
          // this.curSort =
          //   this.orderArray[i - 1].order == 'descending' ? 'desc' : 'asc'
          console.log(this.curSort, 'ppp')
        }
      }
      //转换字段属性
      console.log(column, prop, order)
      this.getSortList(this.orderArray)
    },

isAsc值的定位

 getSortList(arr) {
      let temArr = JSON.parse(JSON.stringify(arr))
      temArr.map(item => {
        item.prop = this.strChange(item.prop)
        item.order = item.order == 'descending' ? 'desc' : 'asc'
        return item
      })
      var str = ''
      for (var i = 0; i < temArr.length; i++) {
        str +=
          i === temArr.length - 1
            ? temArr[i].prop
            : temArr[i].prop + ' ' + temArr[i].order + ','
      }
      console.log(str)
      this.sortStr = str
      //调后端列表接口
    },

将countType转换为count_type

 strChange(arg) {
      var str = arg.split('')
      for (var i = 0; i < str.length; i++) {
        if (str[i].charCodeAt() >= 65 && str[i].charCodeAt() <= 90) {
          str[i] = '_' + str[i].toLowerCase()
        }
      }
      return str.join('')
    },

sortField对象,触发的排序和缓存的排序相同时，取消该字段的排序

eg:{字段1:排序顺序,字段2:排序顺序...}

 flush() {
      this.orderArray = []
      this.curSort = 'asc'
      this.sortStr = ''
      // this.$refs.multipleTable.clearSort(),只会清除最后点击的一项的高亮
      //解决刷新,清除多列表头高亮
      Object.keys(this.sortField).forEach(prop => {
        this.$refs.multipleTable.sort(prop, null)
      })
      this.getList()
    },