场景:


上图中能够看到多个箭头都是选中成果

形容:

element-ui的el-table仅才反对单列(一个字段)进行排序,想要反对多列排序,首先要定义一个数组,用于寄存所有排序的字段及其程序,
设置列sortable=“custom”,联合sort-change事件,在点击排序箭头时进行排序操作

实现:

话不多说间接上代码,大家本人能够批改成合乎本人的业务:

<template>  <el-table    :data="tableData"    style="width: 100%"    :default-sort = "{prop: 'date', order: 'descending'}"     @sort-change="handleSortChange"     :header-cell-class-name="handleHeaderCellClass"    >    <el-table-column      prop="date"      label="日期"      sortable="custom"      width="180">    </el-table-column>    <el-table-column      prop="name"      label="姓名"      sortable="custom"      width="180">    </el-table-column>  </el-table></template><script>  export default {    data() {      return {        tableData: [{          date: '2016-05-02',          name: '王小虎',          address: '上海市普陀区金沙江路 1518 弄'        }],        orderArray: []      }    },    methods: {        //增加排序办法(可把多个字段独特退出排序)    handleHeaderCellClass({ row, column, rowIndex, columnIndex }) {      this.orderArray.forEach((element) => {        if (column.property === element.prop) {          column.order = element.order;        }      });    },    // 点击排序箭头    handleSortChange({ 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 {        //不参加排序        this.orderArray = this.orderArray.filter((element) => {          return element.prop !== prop        });      }      //调后端接口进行排序操作, this.orderArray就是最终排序后的汇合      console.log(this.orderArray );    },    }  }</script>