table表格動態合並行(如果內容相同就合並)


添加方法

mergeRow(list) {
      for (let field in list[0]) {
        let k = 0;
        let i = 0;
        while (k < list.length) {
          list[k][field + "span"] = 1;
          list[k][field + "dis"] = false;
          for (i = k + 1; i <= list.length - 1; i++) {
            if (list[k][field] === list[i][field] && list[k][field] !== "") {
              list[k][field + "span"]++;
              list[k][field + "dis"] = false;
              list[i][field + "span"] = 1;
              list[i][field + "dis"] = true;
            } else {
              break;
            }
          }
          k = i;
        }
      }
      return list;
    },

添加樣式

.hidden{
    display: none
}

使用

在vue中使用需在create生命周期中調用mergeRow方法(如果在mounted中,dom已經掛載,效果不生效)

最后在頁面使用:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM