在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]);
            }
          }
      }
    }

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

Logo

前往低代码交流专区

更多推荐