element table 合并行,element ui table合并表格
这篇文章主要为大家详细介绍了某视频剪辑软件元素实现表格合并行数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素实现表格合并行数据的具体代码，供大家参考，具体内容如下
支持不分页的表格数据，分页的表格数据还有小病菌
模板
埃尔容器
埃尔梅因
埃尔表
:data=tableData
边界
style=宽度：100%
:span-method= object span method //添加这个实现行数据合并
埃尔-表格-列标签=序号prop= id align= center /El-表格-列
埃尔-表格-列标签=名字prop= screenName align= center /El-table-column
埃尔-表格-列标签=时间1 prop=开始时间 align=中心/El-table-column
埃尔-表格-列标签=时间2 prop=结束时间 align=中心/El-table-column
/el-table
/el-main
/El-容器
/模板
脚本
导出默认值{
名称： Formtableyes ，
data() {
返回{
//合并行
spanArr: []，//声明一个数组
表格数据：[
{ id: 1，屏幕名称：“LHC”，开始时间： 12 ,结束时间： 1231 },
{ id: 1，昵称：“LHC”，开始时间： 12 ,结束时间： 123 }
]
};
},
已安装：函数(){
这个。表数据()；//加载数据就调用该方法
},
方法：{
objectSpanMethod({ row，column，rowIndex，columnIndex }) {
if (columnIndex===0) { //合并第一列
const _ row=this。span arr[rowIndex]；
const _col=_row 0？1 : 0;
返回{
rowspan: _row，
列跨度：_列
};
}
if (columnIndex===1) { //合并第二列
const _ row=this。span arr[rowIndex]；
const _col=_row 0？1 : 0;
返回{
rowspan: _row，
列跨度：_列
};
}
//if (columnIndex===2) { //合并第三列
//const _ row=this。span arr[rowIndex]；
//const _col=_row 0？1 : 0;
//返回{
//rowspan: _row，
//colspan: _col
//};
//}
},
tableDatas() {
设接触点=0；
this.tableData.forEach((item，index)={
item.index=索引
if (index===0) {
这个。斯潘纳尔。推；
}否则{
如果(项。id===这个。表数据[索引-1].id) {
这个。spanarr[接触点]=1；
这个。斯潘纳尔。推送(0)；
}否则{
这个。斯潘纳尔。推；
contactDot=索引
}
}
});
},
}
};
/脚本
样式范围。ptselect {
宽度：100%;
}
/风格
效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。