您现在的位置是:网站首页> 编程资料编程资料

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

2023-05-24 730人已围观

简介 vue element table表格相同名称列合并方式_vue.js_

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 < tab.rows.length; i++) { if (val == tab.rows[i].cells[col].innerHTML) { count++; } else { if (count > 1) { //合并 start = i - count; tab.rows[start].cells[col].rowSpan = count; for (var j = start + 1; j < i; j++) { // tab.rows[j].cells[col].style.display = "none"; tab.rows[j].removeChild(tab.rows[j].cells[col]); } count = 1; } val = tab.rows[i].cells[col].innerHTML; } } if (count > 1) { //合并,最后几行相同的情况下 start = i - count; tab.rows[start].cells[col].rowSpan = count; for (var j = start + 1; j < i; j++) { tab.rows[j].removeChild(tab.rows[j].cells[col]); } } } }

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

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

-六神源码网