多列排序:根据某一列排序后的结果再接着排序第二列

   <template>        
      <el-table
      
       :data="virtualList1"
       v-loading="listLoading"
       border
       ref="myTable"
       :span-method="handleSpanMethod">
        
          <template v-for="(header,index) in columnArray">
              <el-table-column
                v-if="header.isShow"
                :fixed="header.isChange"
                :key="index"
                :label="header.label"
                :prop="header.prop"
                :sortable="header.isCustom? false:'custom'"
                :min-width="
                  header.label.length <= 4
                    ? '110px'
                    : header.label.length <= 6
                    ? '140px'
                    : '160px'
                "
                resizable
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
           </template>
     </el-table>
   <template> 
   data() {
      return {
        virtualList1:[],
        columnArray:[
            {
                prop:'第一列',
                label:"oneline",
                isChange:true, // 是否固定
                isShow:true, // 是否展示
                isCustom:false, // 是否需要排序
            },
            {
                prop:'第二列',
                label:"twoline",
                isChange:false,
                isShow:true, 
                isCustom:false,
            },           
        ],
      }
   },
   created(){
        this.getData()
   },
   methods: {
      //接口返回未排序的数据 先排序在合并
      getData(){
          // localeCompare 返回整数
          let sortedArray = res.sort((a, b) => {
            // 根据要排序的某第一列的值排序(比如同一组名的放一起)
            if (a.groupCode !== b.groupCode ) {
              return a.groupCode.localeCompare(
                b.groupCode 
              );
            } else {
              // 排序第二列
              return a.twogroupCode.localeCompare(
                b.twogroupCode
              );
            }
          });
          this.virtualList1 = sortedArray;
     },

    /* 合并行
        row: 行的全部数据
        column:列的结构及其数据
        rowIndex:行号,当前是第几行
        columnIndex:列号,当前是第几列
    */
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (
          rowIndex > 0 &&
          row.groupCode  ==
            this.tableData[rowIndex - 1].groupCode 
        ) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
        let count = 1;
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (
            this.tableData[i].groupCode ==
            row.groupCode 
          ) {
            count++;
          } else {
            break;
          }
        }
        return {
          rowspan: count,
          colspan: 1,
        };
      } else if (columnIndex === 1) {
        if (
          rowIndex > 0 &&
          row.twogroupCode==
            this.tableData[rowIndex - 1].twogroupCode
        ) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
        let count = 1;
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (this.tableData[i].twogroupCode== row.twogroupCode) {
            count++;
          } else {
            break;
          }
        }
        return {
          rowspan: count,
          colspan: 1,
        };
      }
    },
   },




  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值