elementui的table同时选择多个列排序

如果要支持多列排序，并且考虑到后端SQL中可能已经有默认排序，我们需要对前端逻辑和后端API进行相应的调整。

在前端，我们可以使用一个数组来存储多列排序的信息，而不是单个对象。每当用户改变排序时，我们更新这个数组，并发送它到后端。

在后端，我们需要解析这个数组，并根据其顺序在SQL查询中使用多个ORDER BY子句。

下面是一个更新后的示例：

前端Vue组件

<template>
  <el-table
    :data="tableData"
    @sort-change="handleSortChange"
    :header-cell-class-name="handleHeaderCellClass"
  >
    <!-- 表格列定义 -->
  </el-table>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [],
      // data中定义Arr数组，用来存放筛选列
      orderArray: [],
      sorts: [] // 用于存储多列排序信息的数组
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('/api/your-endpoint', {
	        // 构建排序参数数组
	      const sorts = []
	      for (const prop in this.sorts) {
	        if (this.sorts[prop].prop) {
	          sorts.push(this.sorts[prop])
	        }
	      }
          params: {
            sorts: JSON.stringify(sorts) // 将排序数组转换为JSON字符串发送给后端
          }
        });
        this.tableData = response.data;
      } catch (error) {
        console.error(error);
        // 处理错误情况
      }
    },
    // 排序方法
    handleHeaderCellClass({ row, column, rowIndex, columnIndex }) {
      this.orderArray.forEach(element => {
        if (column.property === element.prop) {
          column.order = element.order
        }
      })
    },
    handleSortChange({ column, prop, order }) {
    	// 这里你可以根据 column, prop, order 来向服务器请求排序后的数据
        // 或者使用自定义的排序函数对数据进行排序
        console.log(column, 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
          })
        }
      } else {
        // 不参与排序
        let orderIndex = 0
        this.orderArray.forEach((element, index) => {
          if (element.prop === prop) {
            orderIndex = index
          }
        })
        this.orderArray.splice(orderIndex, 1)
      }

       // 更新或设置列的排序状态
      let sortObj
      if (order === 'ascending') {
        sortObj = { prop, order: 'ASC' }
      } else if (order === 'descending') {
        sortObj = { prop, order: 'DESC' }
      } else {
        // 如果没有指定order，则认为是取消排序
        sortObj = { prop, order: null }
      }
      const existingIndex = this.sorts.findIndex(s => s.prop === prop)

      if (existingIndex > -1) {
        // 如果列已经在排序数组中，更新它的排序方向
        this.sorts[existingIndex] = sortObj
      } else {
        // 如果列不在排序数组中，将其添加到数组的开始处
        this.sorts.unshift(sortObj)
      }

      // 确保排序数组不超过我们想要支持的列数（例如，两列）
      this.sorts.splice(3)

      this.fetchData(); // 当排序改变时，重新请求数据
    }
  },
  created() {
    this.fetchData(); // 组件创建时加载初始数据
  }
};
</script>

后端API（假设使用Node.js和Express）

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/api/your-endpoint', async (req, res) => {
  try {
    const sorts = JSON.parse(req.query.sorts); // 解析前端发送的排序数组
    let sql = 'SELECT * FROM your_table'; // 基础的SQL查询
    let orderBy = '';

    // 遍历排序数组并构建ORDER BY子句
    sorts.forEach((sort, index) => {
      orderBy += ` ${index > 0 ? ', ' : ''}${sort.prop} ${sort.order}`;
    });

    if (orderBy) {
      sql += ` ORDER BY ${orderBy}`; // 添加ORDER BY子句到SQL查询中
    } else {
      // 如果前端没有发送排序信息，使用默认的排序
      sql += ' ORDER BY default_column ASC'; // 替换为你的默认排序列和顺序
    }

    // 执行SQL查询并返回结果...
    const results = await yourDatabaseFunction(sql); // 替换为你的数据库执行函数
    res.json(results);
  } catch (error) {
    console.error(error);
    res.status(500).send('Internal server error');
  }
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在这个示例中，前端使用了一个sorts数组来存储多列排序信息，并在每次排序改变时更新这个数组。然后，它将这个数组转换为JSON字符串，并通过查询参数发送给后端。

后端接收到这个JSON字符串后，将其解析回数组，并遍历数组来构建SQL查询中的ORDER BY子句。如果前端没有发送任何排序信息，后端则使用默认的排序。最后，后端执行SQL查询并返回结果给前端。