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")
            },