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

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

样例:image
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")
            },
posted @   __先森  阅读(1469)  评论(2编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示