element ui 多列排序样式与实现&后台排序参考

排序： 点击上箭头 点击下箭头
点击表头单元格，有个排序顺序 :sort-orders=“sortOrders” 默认是3个状态顺序切换 “ascending”、“descending” 、null
sortOrders: [null], // 点击表头，只触发清除此列排序状态

<template>
  <el-table-column v-bind="{ ...$props, ...$attrs}" :class-name="getSortClass(prop)">
    <template slot-scope="scope">
      <keep-alive>
        <component
          :is="template"
          v-clipboard:[canCopy]
          v-bind="{...$props, ...$attrs}"
          :scope="scope"
        />
      </keep-alive>
    </template>
  </el-table-column>
</template>

getSortClass(key) {
      const sort = this.sortCondition
      if (!sort.length) return 'disorder'
      if (sort.indexOf('+' + key) >= 0) {
        return 'ascending'
      }
      if (sort.indexOf('-' + key) >= 0) {
        return 'descending'
      }
      return 'disorder'
    }

// 列排序
// 数组记录列及其列的排序规则
    onSortChange({ column, prop, order }) {
      if (!prop) return
      const sort = this.sortCondition
      if (!order && !sort.length) return

      // 如果是清除排序，且无升降排序，应不触发排序
      const index = sort.findIndex(v => /^(\+|\-).*$/.test(v))
      if (index < 0 && !order) return

      sort.length = 0 // 目前仅支持单列排序

      // let index = sort.indexOf('+' + prop)
      // if (index !== -1) {
      //   sort.splice(index, 1)
      // }

      // index = sort.indexOf('-' + prop)
      // if (index !== -1) {
      //   sort.splice(index, 1)
      // }

      if (order === 'ascending') {
        sort.push('+' + prop)
      }
      if (order === 'descending') {
        sort.push('-' + prop)
      }
      console.log('sort:', this.sortCondition)
      // return
      this.fetchData(1)
    }