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