标签：rowspan return colspan 单元格 list html field vue

总结
用rowIndex, columnIndex 找到要合并的开始单元格
return {rowspan: 1,colspan: 1 } 表示表格不变
return {rowspan: 2,colspan: 1 } 表示表格向下合并一个单元格
return {rowspan: 1,colspan: 2 } 表示表格向右合并一个单元格
return {rowspan: 0,colspan: 0 } 表示删除此单元格

    /** 数据处理-合并单元格 */
    /** list: 后台传回的数据 */
    combineCell(list) {
      for (var field in list[0]) {  // 获取数据中的字段，也就是table中的column，只需要取其中一条记录的就可以了
        // 定义数据list的index
        var k = 0;
        while (k < list.length) {
          // 增加字段-用于统计有多少重复值
          list[k][field + 'span'] = 1;
          // 增加字段-用于控制显示与隐藏
          list[k][field + 'dis'] = '';
          for (var i = k + 1; i <= list.length - 1; i++) {
            // 判断第k条数据的field字段，与下一条是否重复
            if (list[k][field] === list[i][field] && list[k][field] !== '') {
              // 如果重复，第k条数据的字段统计+1
              list[k][field + 'span']++;
              // 设置为显示
              list[k][field + 'dis'] = '';
              // 重复的记录，则设置为1，表示不跨行
              list[i][field + 'span'] = 1;
              // 并且该字段设置为隐藏
              list[i][field + 'dis'] = 'none';
            } else {
              break;
            }
          }
          // 跳转到第i条数据的索引
          k = i;
        }
      }
      console.log(list);
      this.ccxx = _.cloneDeep(list);
    },

https://blog.csdn.net/Ajax_mt/article/details/88685425

标签：rowspan,return,colspan,单元格,list,html,field,vue
来源： https://www.cnblogs.com/porter/p/16091684.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。