正文

1. 源码

  1.   <template>
  2.     <el-table :data="tableData" style="width: 100%" :header-cell-class-name='handleHeadAddClass' @sort-change='tableSortChange'>
  3.       <el-table-column prop="date" label="日期" sortable width="180">
  4.       </el-table-column>
  5.       <el-table-column prop="name" label="姓名" sortable width="180">
  6.       </el-table-column>
  7.       <el-table-column prop="address" label="地址">
  8.       </el-table-column>
  9.     </el-table>
  10.   </template>
  12. <script>
  13. export default {
  14.   data() {
  15.     return {
  16.       tableData: [
  17.         {
  18.           date: "2016-05-02",
  19.           name: "李小虎",
  20.           address: "上海市普陀区金沙江路 1518 弄"
  21.         },
  22.         {
  23.           date: "2016-05-04",
  24.           name: "王小虎",
  25.           address: "上海市普陀区金沙江路 1517 弄"
  26.         },
  27.         {
  28.           date: "2016-05-01",
  29.           name: "安小虎",
  30.           address: "上海市普陀区金沙江路 1519 弄"
  31.         },
  32.         {
  33.           date: "2016-05-03",
  34.           name: "王小虎",
  35.           address: "上海市普陀区金沙江路 1516 弄"
  36.         }
  37.       ],
  38.       sortPropList: {}
  39.     };
  40.   },
  41.   methods: {
  42.     /**
  43.      * 报表所有表头都可以进行排序，1 升；2 降
  44.      */
  45.     tableSortChange({ column, prop, order }) {
  46.       let sortType = undefined;
  47.       switch (order) {
  48.         case "ascending":
  49.           sortType = "1";
  50.           break;
  51.         case "descending":
  52.           sortType = "2";
  53.           break;
  55.         default:
  56.           break;
  57.       }
  58.       this.sortPropList[prop] = order;
  59.       // 获取数据
  60.       // this.$set(sortProp, 'sortType', sortType)
  61.       // this.submitFilterForm();
  62.     },
  63.     /**
  64.      * 增加多列排序
  65.      */
  66.     handleHeadAddClass({ column }) {
  67.       if (this.sortPropList[column.property]) {
  68.         column.order = this.sortPropList[column.property];
  69.       }
  70.     }
  71.   }
  72. }
  73. </script>

在线地址

codepen 在线示例：element table 多列排序