elementui table 动态合并单元格

由于项目有个需求需要合并单元格，但是有新增、删除等功能；故要动态合并单元格，然后查找网上资料，实现了这个功能：

<script>
data(){
return{
tableData:[],
spanArr:[],//存储需要合并的单元格
pos:"",// 每个单元格的下标
spanArrOne:[],//针对第一列需要全部合并的单元格
posOne:""
}}
created(){
this.getData();
},
methods:{
getData(){
const that = this;
getList(xx).then(res=>{
          if(res.code === 0){
            that.tableData = res.list;
            that.getSpanArr(res.list,'type');//由于每个业务需要合并单元格的字段名不一致，故需要传对应的字段值
            that.getSpanArrOne(res.list);
        }
       })
    },
spanMethod(row,column,rowIndex,colunmIndex){
    //由于我的需求是第一列合并,并且是根据业务部门id来判断
if(this.partmentId === 7){
if(colunmIndex === 0){
   const _row = this.spanArrOne[rowIndex];
const _col = _row > 1 ? 1: 0;
return {
    rowspan:_row,
    colspan:_col
} 
}
}
if(this.partmentId === 6){
if(colunmIndex === 0){
   const _row = this.spanArr[rowIndex];
const _col = _row > 1 ? 1: 0;
return {
    rowspan:_row,
    colspan:_col
} 
}
}
},
getSpanArr(data,type){
for(let i =0;i<data.length;i++){
if(i ===0){
this.spanArr.push(1);
this.pos = 0;
}else{
//判断当前元素与上一个元素是否相同
if(data[i][type] === data[i-1][type]){
        this.spanArr[this.pos] +=1;//需要合并的行数
        this.spanArr.push(0);//新增被合并的行
}else{
    this.spanArr.push(1);
    this.pos = i;//新的需要合并的第几行数
}
}
},
getSpanArrOne(data){
for(let i =0;i<data.length;i++){
if(i ===0){
this.spanArr.push(1);
this.pos = 0;
}else{
        this.spanArr[this.pos] +=1;//需要合并的行数
        this.spanArr.push(0);//新增被合并的行

}
}
}
</script>

参考文章：https://blog.51cto.com/u_16099318/9809419