element-plus表格多字段排序解决方案

单字段排序解决方式

el-table 结合 @sort-change 配合子项 :sort-orders属性配合即可实现更改排序方式时，调用接口获取最新排序后的数据。

问题

当点击另外的子项时，又会以新属性为标准重新排序，仅靠这样是不能完成多字段排序的。

解决方案

1.存储字段

将当前排序字段存储下来，在点击新排序字段时，继续进行添加这样就存储了两个字段可以用来发起请求。但是会发现表格头排序样式变了，老排序字段的排序箭头样式并没有保留，仅仅保留了新点击字段的样式。

2.利用：header-cell-class-name属性完成表头排序样式的设置

有个特性可以利用，当点击排序时，header-cell-class-name属性绑定的事件会被触发，而在其回调中我们又可以拿到column 属性，有了这个属性，我们就可以设置column的 order 属性，从而显式的控制样式了。

3.样例

这里以两个字段的情况为例

<el-table
    v-if="showTable"
    :data="tableData"
    @sort-change="sortChange"
    :header-cell-class-name="
      (params) => {
        setHeaderClass(params)
      }
    "
  >

const sortField = ref({}) //记录排序字段与升降状态
const sortColumns = ref() //字段属性名
const sortType = ref() //字段排序类型
const sortChange = ({ order, prop }) => {
  let sortColumnsArr = sortColumns.value ? sortColumns.value.split(',') : []
  let sortTypeArr = sortType.value ? sortType.value.split(',') : []
  // 触发的排序和缓存的排序相同时，取消该字段的排序
  if (!order || sortField.value[prop] == order) {
    sortField.value[prop] = null
    sortColumnsArr.map((item, index) => {
      if (item == prop) {
        sortColumnsArr.splice(index, 1)
        sortTypeArr.splice(index, 1)
      }
    })
  } else {
    sortField.value[prop] = order
    // 不存在直接push
    if (!sortColumnsArr.includes(prop)) {
      sortColumnsArr.push(prop)
      if (order == 'descending') {
        sortTypeArr.push('-1')
      }
      if (order == 'ascending') {
        sortTypeArr.push('1')
      }
    } else {
      // 否则 先删除老的值在push新的值
      sortColumnsArr.map((item, index) => {
        if (item == prop) {
          sortColumnsArr.splice(index, 1)
          sortTypeArr.splice(index, 1)
        }
      })
      sortColumnsArr.push(prop)
      if (order == 'descending') {
        sortTypeArr.push('-1')
      }
      if (order == 'ascending') {
        sortTypeArr.push('1')
      }
    }
  }
  // 确保最多只有两组排序值
  if (sortColumnsArr.length > 2) {
    sortColumnsArr = sortColumnsArr.slice(-2)
  }
  if (sortTypeArr.length > 2) {
    sortTypeArr = sortTypeArr.slice(-2)
  }
  sortColumns.value = sortColumnsArr.join(',') || ''
  sortType.value = sortTypeArr.join(',') || ''
  getList()
}

拿到排序字段的名称对应的排序类型后，就可以设置表头的排序样式了。

function setHeaderClass({ column }) {
  if (sortField.value[column.property]) {
    column.order = sortField.value[column.property]
  }
}