直接切入正题。 多列排序主要用到el-table的`header-cell-class-name`和`sort-change`; __header-cell-class-name__ > 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 __sort-change__ > 当表格的排序条件发生变化的时候会触发该事件 先开启远程搜索,给需要排序的列上加`sortable='custom'` 核心代码： ```html <el-table class="auto-scroll" @sort-change="handleSortChange" :data="tableData" :header-cell-class-name="handleHeaderCellClass"> <!-- 中间省略--> </el-table> <script> const maxOrderCount = 2;//最大同时排序个数 //.... data(){ return { orderDict: {},//prop属性对应的升降序排序字典 orderStackSet: [],//排序顺序，存储的prop属性字段 } }, methods: { numericString, handleSortChange({ column, prop, order }) { this.orderStackSet=this.orderStackSet.filter(item=>item!=prop); if (order) { this.orderDict[prop] = order; this.orderStackSet.push(prop); } else { delete this.orderDict[prop]; } if (this.orderStackSet.length > maxOrderCount) { let del=this.orderStackSet.splice(0,1); let leftEl=del[0]; delete this.orderDict[leftEl]; } this.loadData();//网络请求 }, handleHeaderCellClass({ row, column, rowIndex, columnIndex }) { if (this.orderStackSet.length > 0) { let arr = this.orderStackSet; let currentField = arr[arr.length - 1]; if (currentField) { return this.orderDict[column.property]; } } return ""; }, } </script> ``` 以上。