vue+element项目中动态表格合并

需求:elementui里的table虽然有合并函数(:span-method),单基本都是设置固定值合并.现在有一个树型结构的数据,要求我们将里面的某个list和其他属性一起展开展示,并且list中的长度不确定.如下图

数据结构:

效果图:

方案:

1.数据平铺,我这里只做一层嵌套的.多层的可递归操作.

实际上elementui的table只有合没有分.所有将list里的每条item属性拿出来和外面的属性拼成新数据

//数据展开
        openList:function(list,attr){
            var list=JSON.parse(JSON.stringify(list));
            var arr=[]
            if(list.length>0){
                list.forEach(function(item){
                    item[attr].length>0 &&  item[attr].forEach(function(item1){
                            var obj=JSON.parse(JSON.stringify(item));
                            obj['no']=item1['no']
                            obj['avgA']=item1['avgA']
                            obj['avgV']=item1['avgV']
                            obj['homogeneity']=item1['homogeneity']
                             arr.push(obj)
                    })
                })
            }
            return arr;
        },

2.拿到展开的数据后需要给特定的数据加上标识,因为elementui合并的时候是单独的一条数据进行识别的

需要记录的数据有,合并之后的序号、需要合并的数据当前是第几条、需要合并几行

 //表头合并函数
        mergeHead:function(list,attr,colspan){
            //记录已经处理过的条数
            //合并之后的序号标识
            var number=0
            //记录上次合并的索引
            var didNum=0
            if(list.length==1){
                //rowspan为合并的行数
                list[0].rowspan=1
                //index为当前数据的索引
                list[0].index=1

            }else{
                for(var i = 0 ;i<list.length-1;i++){
                    if(list[i][attr]!=list[i+1][attr]){
                        list[didNum].rowspan=i+1-didNum
                        number+=1
                        list[didNum].index=number
                        didNum=i+1
                    }else{

                    }
                    if(i==list.length-2){
                        list[didNum].rowspan=i+2-didNum
                        number+=1
                        list[didNum].index=number
                    }
                }
            }
        },

3.落实到elementui的table上

 objectSpanMethod( {row, column, rowIndex, columnIndex }) {
            if (columnIndex <= 4) {
                if(row.rowspan){
                    return {
                        rowspan: row.rowspan,
                        colspan: 1
                    };
                }else{
                    return[0,0]
                }


            }  else if(columnIndex == 11){
                if (row.rowspan) {
                    return {
                        rowspan: row.rowspan,
                        colspan: 1
                    };
                }

            }else{
                return [1,1]
            }

        },

注意点:objectSpanMethod函数中合并行要先判断columnIndex,合并列要先判断rowIndex.而且在写判断的时候,你必须清晰的写出每一行或者每一列.多条件写完,必须写else{return [0,0]}或者else{return [1,1]}.不然table不是你想看到的样子.

vue+element项目中动态表格合并

推荐阅读