el-table sortable设罡为custom并可以同时选择多列排序以使用后端排序 完整代码

这里给出一个使用 Element UI 的 el-table 进行多列排序，并使用后端排序的代码示例：

HTML模板部分：

<el-table :data="tableData" :default-sort="defaultSort" :sort-method="sortMethod">
  <el-table-column prop="name" label="姓名" sortable="custom"></el-table-column>
  <el-table-column prop="age" label="年龄" sortable="custom"></el-table-column>
  <el-table-column prop="score" label="成绩" sortable="custom"></el-table-column>
</el-table>

JavaScript部分：

export default {
  data() {
    return {
      tableData: [], // 表格数据
      defaultSort: { // 默认排序
        prop: 'name',
        order: 'ascending'
      },
      sortColumns: [] // 多列排序的列属性数组
    }
  },
  methods: {
    // 多列排序方法
    sortMethod(a, b) {
      for (let i = 0; i < this.sortColumns.length; i++) {
        const column = this.sortColumns[i]
        const prop = column.prop
        const order = column.order
        // 比较函数
        const compareFn = (x, y) => {
          const a = x[prop]
          const b = y[prop]
          const result = a === b ? 0 : (a > b ? 1 : -1)
          return order === 'ascending' ? result : -result
        }
        const result = compareFn(a, b)
        if (result !== 0) {
          return result
        }
      }
      return 0
    },
    // 排序列变化回调函数
    handleSortChange({ prop, order }) {
      // 清空之前的排序列
      this.sortColumns = []
      // 添加当前的排序列
      if (prop && order) {
        this.sortColumns.push({ prop, order })
      }
      // 发送后端排序请求
      this.fetchData()
    },
    // 后端排序数据请求
    fetchData() {
      const params = {
        sortColumns: this.sortColumns
      }
      // 发送请求并更新表格数据
      // ...
    }
  }
}

解释：

1. 在 el-table-column 中设置 sortable 属性为 custom，表示使用自定义排序方式。
2. 在 el-table 中设置 default-sort 属性为默认排序方式，并设置 sort-method 属性为多列排序方法。
3. 在多列排序方法中，遍历 sortColumns 数组，按照列属性和排序方式进行排序比较。
4. 在 handleSortChange 回调函数中，监听排序列变化事件，清空之前的排序列，添加当前的排序列，并发送后端排序请求。
5. 在 fetchData 函数中，发送后端排序请求，传递 sortColumns 参数，更新表格数据。