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