element-plus中Table排序需要后端排序 使用sortable=“custom“ 的用法

1.多列筛选，在对应el-table-column 中 设置 prop 及 sortable="custom"，如下

 2.如果需要后端排序，需将 sortable 设置为 custom，同时在 Table 上监听 sort-change 事件， 在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据

        <el-table
          v-loading="loading"
          :data="list"
          stripe
          show-overflow-tooltip
          @selection-change="handleSelectionChange"
          @sort-change="handleSortChange"
        >
          // value1排序
          <el-table-column prop="value1" label="总价1" sortable="custom" min-width="110">
            <template #default="scope">{{ scope.row.value1 }} </template>
          </el-table-column>
           // value2排序
          <el-table-column prop="value2" label="总价2" sortable="custom" min-width="110">
            <template #default="scope">{{ scope.row.value2 }} </template>
          </el-table-column>
           // value3排序
          <el-table-column prop="value3" label="总价3" sortable="custom" min-width="110">
            <template #default="scope">{{ scope.row.value3 }} </template>
          </el-table-column>

        </el-table>

 3.因为接口传参的特殊性，所以我这个多列排序内容涉及到置空参数

// table排序箭头变化时触发(3种状态 ascending  descending null )
const handleSortChange = (column: any, prop, order) => {
  console.log(prop, 'prop')
  console.log(order,'order')
  // 在方法触发时先获取并保存接口需要的字段,调用分页方法,分页方法中掉用了获取列表数据方法
  // column.order为空时仅刷新页面
  if (column.order === null) {
    listQuery.value1 = '' // 数量1排序方式 1从大到小 2从小到大
    listQuery.value2 = '' // 数量2排序方式1从大到小 2从小到大
    listQuery.value3 = '' // 数量3排序方式 1从大到小 2从小到大
    listQuery.value4 = '' // 数量4 1从大到小 2从小到大
    listQuery.value5 = '' // 数量5 1从大到小 2从小到大
    handleSearch() // 查询方式
    return
  }
  // 根据colume.prop判断是哪一列(点击的当前是哪一列)
  // 根据colume.order判断是升序还是降序,并根据接口需要赋值2或1
  // ascending 升序从小到大
  if (column.prop === 'value1') {
    listQuery.value1= column.order === 'ascending' ? 2 : 1
    listQuery.value2= null
    listQuery.value3= null
  } else if (column.prop === 'value2') {
    listQuery.value2= column.order === 'ascending' ? 2 : 1
    listQuery.value1= null
    listQuery.value3= null
  } else if (column.prop === 'value3') {
    listQuery.value3= column.order === 'ascending' ? 2 : 1
    listQuery.value1= null
    listQuery.value2= null

  }
  handleSearch() // 调用查询方法
}

4.change事件的另外2个参数prop以及order 输出无内容（暂不知原因）