el-table span-method动态合并行

最近项目中需要用到table 动态合并行，官方文档给出的方法是固定合并不是动态的但是大致思路算是给出来了，开干。。。

效果是这样的额

 //table展示
<el-table :data="dataList" border :span-method="spanMethod">
     <el-table-column prop="name" label="第一列" ></el-table-column>
     <el-table-column prop="synonyms" label="第二列" ></el-table-column>
 </el-table>

 模拟一段已经排好序的数据(要么让后端排好序返回，要么自己处理)

dataList:[
   {name:'同义词',synonyms:'电视剧活动结束'},
   {name:'同义词',synonyms:'电视剧活动结束'},
   {name:'同义词',synonyms:'电视剧活动结束'},
   {name:'阿莎',synonyms:'速度还是啊实打实'},
   {name:'阿莎',synonyms:'速度还是啊实打实'},
   {name:'重生的机会',synonyms:'恶如让他服务活动'},
   {name:'重生的机会',synonyms:'恶如让他服务活动'},
   {name:'重生的机会',synonyms:'恶如让他服务活动'},
   {name:'重生的机会',synonyms:'恶如让他服务活动'},
],
getNum:new Map(),

定义一个map对象存储相同name出现的次数

count(){
    let dataMap = new Map();
    for (let i= 0; i< this.dataList.length;i++){
        let key = this.dataList[i].name;
        if(dataMap.has(key)){
            dataMap.set(key,dataMap.get(key)+1)
        } else{
            dataMap.set(key,1);
        }
    }
    this.getNum = dataMap;
},

关键点来了 对el-table 自带的span-method方法略加修改，var num = 0;num定义在export 外面防止在组件中报红 

spanMethod({ row, column, rowIndex, columnIndex }){
    if (columnIndex === 0) {
        let initNum = num;
        if(initNum+1 ==this.getNum.get(row.name)){
            num = 0;
        }else{
            num++;
        }
        if(initNum  % this.getNum.get(row.name) === 0){
            return{
                rowspan:this.getNum.get(row.name),
                colspan: 1
            } 
        }else{
            return{
                rowspan:0,
                colspan: 0
            } 
        }
    }
},

 大致思路就是这样，欢迎指导交流。