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不是你想看到的樣子.