VUE合并行

参考文章：Element - The world's most popular Vue UI framework 

Element UI中合并行真是坑人啊，你想使用它，你必须先知道哪些是要合并的才行，所以在列表加载之前，我们要做准备工作。

export default {
  data(){
    return{
      //主列表
      dataObj:[],

      //通过计算得知需要合并的行
      mergeList:[],

      //需要合并的字段
      //column:列，从0开始
      //name:此列的字段
      //maxName:根据上一个字段进行合并
      keyList:[
        {column:1,name:'aaa',maxName:'aaa'},
        {column:2,name:'bbb',maxName:'aaa'},
        {column:3,name:'ccc',maxName:'aaa'},
        {column:4,name:'ddd',maxName:'ccc'},
      ],
    }
  },

加载列表的时候，需要先清空主列表和需要合并的列表，一定要清空，一定要清空，一定要清空（重要的事情说三遍），查询出结果后，先去寻找我们要合并的行，再去加载主列表，顺序不能乱。

加载主列表的时候需要合并行，我写了个js，可以复用给其它页面使用。

<template>
    <el-table :data="dataObj.items" border>
        <el-table-column label="序号" type="index" align="center" width="55px"></el-table-column>
        <el-table-column show-overflow-tooltip label="aaa" prop="aaa" min-width="120px"></el-table-column>
        <el-table-column show-overflow-tooltip label="bbb" prop="bbb" min-width="120px"></el-table-column>
        <el-table-column show-overflow-tooltip label="ccc" prop="ccc" min-width="120px"></el-table-column>
        <el-table-column show-overflow-tooltip label="ddd" prop="ddd" min-width="120px"></el-table-column>
    </el-table>
</template>
import basicUtil from "../../util/basicUtil";
export default {

methods:{
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        return basicUtil.objectSpanMethod(row,rowIndex,columnIndex,this.keyList,this.mergeList);
    },
    getInfo(){
        //每次查询都要清空
        this.$set(this,'dataObj',[]);
        this.$set(this,'mergeList',[]);
        getList({}).then(res=>{
            if(res.success){
                let result = res.result;
                //有需要的先排序
                //计算合并值
                basicUtil.mergeSetKey(this.keyList,result,this.mergeList);
                //加载主列表
                this.$set(this,'dataObj',result);
            }
        })
    }
}
created() {
    this.getInfo();
}
}

最重要的js来了，写的有些繁琐，但真的管用，希望各位大佬能够简化一下

export default {
  mergeSetKey(keyList,resultList,mergeList){
    keyList.forEach(item=>{
      this.setKeyLength(resultList,mergeList,item.column,item.name,item.maxName);
    })
  },
  setKeyLength(resultList,mergeList,column,name,maxName){
    let beforeName = '';
    let beforeMaxName = '';
    let nowName = '';
    let nowMaxName = '';
    resultList.forEach((item,index)=>{
      if(index==0){
        beforeName = item[name]?item[name]:'';
        beforeMaxName = item[maxName]?item[maxName]:'';
      }
      nowName = item[name]?item[name]:'';
      nowMaxName = item[maxName]?item[maxName]:'';
      if((beforeMaxName !== nowMaxName || beforeName !== nowName) && index!=0){
        let keySum = 0;
        mergeList.forEach(keyItem=>{
          if(keyItem.column === column){
            keySum = keySum + keyItem.key;
          }
        })
        let temp = {
          column:column,
          rowIndex:keySum,
          key:index-keySum
        }
        mergeList.push(temp);
        beforeName = nowName;
        beforeMaxName = nowMaxName;
      }
      if(++index == resultList.length){
        let keySum = 0
        mergeList.forEach(keyItem=>{
          if(keyItem.column === column){
            keySum = keySum + keyItem.key;
          }
        })
        let temp = {
          column:column,
          rowIndex:keySum,
          key:index-keySum
        }
        mergeList.push(temp);
      }
    })
  },
  objectSpanMethod(row,rowIndex,columnIndex,keyList,mergeList) {
    let flag = false;
    keyList.forEach(item=>{
      if(columnIndex === item.column){
        flag = true;
      }
    })
    if(flag){
      let key = 0
      for(let i=0;i<mergeList.length;i++){
        if(mergeList[i].column===columnIndex && mergeList[i].rowIndex===rowIndex){
          key = mergeList[i].key;
          break;
        }
      }
      if(key!=0){
        return {
          rowspan: key,
          colspan: 1
        };
      }else{
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    }else{
      return {
        rowspan: 1,
        colspan: 1
      };
    }
  },
}

最后说明一点，千万不要在其中加console.log()会非常慢。因为计算量太大，合并列或行都不适用非常庞大的主列表。