Element-ui2.0实现表格多列进行排序

Element-ui2.0实现表格多列进行排序

样例：
1.html代码：

<el-table
            :data="ptPartDetail"
            style="width: 100%"
            border
            @sort-change="handleSortChange"
            :header-cell-class-name="handleHeaderCellClass"
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="id" label="物料编码" width="150">
            </el-table-column>
            <el-table-column prop="name" label="物料名称" width="120">
            </el-table-column>
            <el-table-column
              prop="btno"
              label="物料批号"
              width="120"
              sortable="custom"
            >
            </el-table-column>
            <el-table-column prop="btnoAllQty" label="批次数量" width="120">
            </el-table-column>
            <el-table-column
              prop="btnoLocQty"
              label="库存数量"
              width="120"
              sortable="custom"
            >
            </el-table-column>
            <el-table-column prop="unitPrice" label="物料单价" width="120">
            </el-table-column>
            <el-table-column
              prop="productDate"
              label="生产日期"
              width="120"
              sortable="custom"
            >
            </el-table-column>
            <el-table-column prop="version" label="物料版本" width="120">
            </el-table-column>
            <el-table-column prop="unit" label="单位" width="120">
            </el-table-column>

2.定义Data数组存放筛选数据

//  data中定义Arr数组，用来存放筛选列
data(){
    return {
        orderArray: [],
    }
}

3.排序方法

            //排序方法
            handleHeaderCellClass({row, column, rowIndex, columnIndex}){
                this.orderArray.forEach(element => {
                    if (column.property===element.prop) {
                        column.order=element.order
                    }
                });
            },
            handleSortChange( {column, prop, order} ){    //order值（ascending、descending、null）对应不同的排序方式
                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)
                }
                console.log(this.orderArray,"this.orderArray000")
            },