element table实现多列排序，并分别保持各排序状态

code_txy

已于 2025-02-14 15:11:24 修改

阅读量265

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言 elementui vue

于 2025-02-14 15:09:14 首次发布

本文链接：https://blog.csdn.net/qq_36675216/article/details/145634141

话不多说，直接上代码

<el-table
			ref="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>
  </el-table>

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

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[orderIndex].order=null;
     }
      console.log(this.orderArray,)
     //这块可以修改相关给后台的数据格式，并请求接口

 },

重置排序状态

resetOrder() {
      this.$refs.table.clearSort();
      let columns = this.$refs.table.columns;
      columns.forEach((column) => {
        if (column.sortable == "custom") {
          column.order = undefined;
        }
      });
      this.orderArray = [];
    },