单元格跨多列合并,vue多项目合并
这篇文章主要介绍了某视频剪辑软件单元格多列合并的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
一.多列合并
1.在埃尔表中添加:span-method=objectSpanMethod 属性来控制合并单元格,如下图
2.合并代码,每一列都要设置一个不同的钥匙,这样可以防止合并的时候上下内容一样导致错误的问题
objectSpanMethod({ row,column,rowIndex,columnIndex }) {
if (columnIndex===0) {
如果(这个。myobj[row。channel _ type]).start===rowIndex) {
返回{
rowspan:这个。myobj[row。频道类型].步,
栏数:1
};
}否则{
返回{
rowspan: 0,
列跨度:0
};
}
}
if (columnIndex===1) {
如果(
这个。myobj _ two[row。频道_名称_中国行。频道类型].start===
行索引
) {
返回{
rowspan:这个。myobj _ two[row。频道_名称_中国行。渠道类型]。步,
栏数:1
};
}否则{
返回{
rowspan: 0,
列跨度:0
};
}
}
},
//合并单元格第一列
resolveData(arr) {
var obj={ };
arr.forEach((val,key)={
如果(!obj[val.channel_type]) {
obj[val.channel_type]={
开始:键,
第一步
};
}否则{
通道类型.步;
}
});
this.myObj=obj
控制台。log(obj);
},
//合并单元格第二列
resolveData_two(arr) {
var obj={ };
arr.forEach((val,key)={
如果(!价值,价值。频道名称中文版。channel _ type]){
价值,价值。频道名称中文版。channel _ type]={
开始:键,
第一步
};
}否则{
价值,价值。频道名称中文版。频道类型].步;
}
});
this.myObj _ two=obj
console.log(this.myObj_two, this。myobj’);
},
3.需要调用一下下面两个函数,数据为你所获取的所有数据
this.resolveData_two(数据);
this.resolveData(数据);
4.合并结果如下图
到此这篇关于某视频剪辑软件单元格多列合并的实现的文章就介绍到这了,更多相关某视频剪辑软件单元格多列合并内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。