vue element table表格相同名称列合并方式

这篇文章主要介绍了vue element table表格相同名称列合并方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

element table表格相同名称列合并

对table表格相同内容行的合并

在vue开发中会有对表格的操作,有时因为需要遍历的情况不同,对于数据相同行处理时,使用element的table不太好实现,还是使用html的table标签!

而此时,对于相同数据行,使用rowspan进行合并则无法更好的遍历数据,比如我们要实现这样的表格

 数据格式一看,使用遍历的话会更好实现,这个时候表格是这样的

 这个时候可以使用方法获取相同内容行,对其进行处理,方法如下

 mergeTable() {  //table表合并相同内容的行 var tab = document.getElementById("subtable"); var maxCol = 3, val, count, start; // var ys = ""; for (var col = maxCol - 1; col >= 0 ; col--) { count = 1; val = ""; for (var i = 0; i  1) { //合并 start = i - count; tab.rows[start].cells[col].rowSpan = count; for (var j = start + 1; j  1) { //合并,最后几行相同的情况下 start = i - count; tab.rows[start].cells[col].rowSpan = count; for (var j = start + 1; j 

然后在生命周期函数这调用该方法即可实现对相同内容行的合并操作!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持0133技术站。

以上就是vue element table表格相同名称列合并方式的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程