table表格动态合并

最终效果图：

一、JQ插件

参考链接：http://www.jq22.com/jquery-info9377

插件封装：

(function ($) {
  $.fn.tablesMergeCell = function (options) {
    let defaults = {
      data: {}, // 后台数据
      automatic: true, // 是否自动合并
      cols: null, // 用数组表示列的索引,从0开始,然后根据指定列来处理(合并)相同内容单元格
      rows: null, // [[3, 4, 5], [6, 7]]自定义合并的行范围
    };
    let opts = $.extend(defaults, options);

    // 数据初始化
    let init = () => {
      let title = document.createElement('tr');
      for (let item of opts.data.title) {
        let th = document.createElement('th');
        th.innerHTML = item;
        title.append(th);
      }
      $(this).append(title);

      for (let rows of opts.data.content) {
        let tr = document.createElement('tr');
        for (let item of rows) {
          let td = document.createElement('td');
          td.innerHTML = item;
          tr.append(td);
        }
        $(this).append(tr);
      }
    };

    // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法
    let tablesMergeRows = ($table, colIndex, rowIndex) => {
      $table.data('col-content', ''); // 存放单元格内容
      $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
      $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
      $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用

      // 我们对每一行数据进行"扫描"处理 关键是定位col-td, 和其对应的rowspan
      $('tbody tr', $table).each(function (index) {
        let $tr = $(this);
        // td:eq中的colIndex即列索引
        let $td = $('td:eq(' + colIndex + ')', $tr);
        let currentContent = $td.html();
        if (opts.automatic) {
          // 内容
          // 第一次时走此分支
          // console.log($table.data('col-content'));
          if ($table.data('col-content') === '') {
            $table.data('col-content', currentContent);
            $table.data('col-td', $td);
          } else {
            // 上一行与当前行内容相同
            if ($table.data('col-content') == currentContent) {
              addRowspan(); // 上一行与当前行内容相同则col-rowspan累加, 保存新值
            } else {
              newRowspan(); // 上一行与当前行内容不同
            }
          }
        } else {
          // 指定
          if (opts.rows.length > 0) {
            if (opts.rows[0].length == undefined) {
              for (let i = 0; i < opts.rows.length; i++) {
                customRowspan(opts.rows[i], opts.rows.length);
              }
            } else {
              for (let i = 0; i < opts.rows[rowIndex].length; i++) {
                customRowspan(opts.rows[rowIndex][i], opts.rows[rowIndex].length);
              }
            }
          }
        }
        function customRowspan(val, len) {
          if (index == val) {
            if ($table.data('col-content') == '') {
              if (currentContent == '') {
                currentContent = true;
              }
              $table.data('col-content', currentContent);
              $td.attr('rowspan', len);
            } else {
              $td.hide();
            }
          }
        }
        function addRowspan() {
          let rowspan = $table.data('col-rowspan') + 1;
          $table.data('col-rowspan', rowspan);
          // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
          $td.hide();
          // 最后一行的情况比较特殊一点
          // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
          if (++index == $table.data('trNum')) {
            $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
          }
        }
        function newRowspan() {
          // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
          if ($table.data('col-rowspan') !== 1) {
            $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
          }
          // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
          $table.data('col-td', $td);
          $table.data('col-content', $td.html());
          $table.data('col-rowspan', 1);
        }
      });
    };

    // 合并列
    let tablesMergeCols = ($table, cols) => {
      $table.data('col-content', ''); // 存放单元格内容
      $table.data('col-colspan', 1); // 存放计算的cols值 默认为1
      $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
      $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
      $('tbody tr', $table).each(function (index, item) {
        for (let j = 0; j < cols.length; j++) {
          let $td = $('td:eq(' + cols[j] + ')', item);
          let currentContent = $td.html();
          if (opts.automatic) {
            // 内容
            // 第一次时走此分支
            if ($table.data('col-content') === '') {
              $table.data('col-content', currentContent);
              $table.data('col-td', $td);
            } else {
              // 上一列与当前行内容相同
              if ($table.data('col-content') == currentContent) {
                // 上一列与当前列内容相同则col-rowspan累加, 保存新值
                addColspan();
              } else {
                // 上一列与当前列内容不同
                newColspan();
              }
            }
          }

          function addColspan() {
            let colspan = $table.data('col-colspan') + 1;
            $table.data('col-colspan', colspan);
            // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
            $td.hide();
            // 比如最后1行 连续多列td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置colspan
            if (index++ == $table.data('trNum') && j === cols.length - 1) {
              $table.data('col-td').attr('colspan', $table.data('col-colspan'));
            }
          }

          function newColspan() {
            if ($table.data('col-colspan') !== 1) {
              $table.data('col-td').attr('colspan', $table.data('col-colspan'));
            }
            // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
            $table.data('col-td', $td);
            $table.data('col-content', $td.html());
            $table.data('col-colspan', 1);
          }
        }
      });
    };

    // 同样是个private函数 清理内存之用
    let dispose = $table => {
      $table.removeData();
    };

    return this.each(() => {
      let cols = opts.cols,
        rows = opts.rows;
      init();
      if (rows === null) {
        for (let i = cols.length - 1; cols[i] != undefined; i--) {
          tablesMergeRows($(this), cols[i]);
        }
      } else {
        for (let i = cols.length - 1, k = opts.rows.length - 1; cols[i] !== undefined; i--, k--) {
          tablesMergeRows($(this), cols[i], k);
        }
      }
      if (cols !== null) {
        tablesMergeCols($(this), cols);
      }
      dispose($(this));
    });
  };
})(jQuery);

页面调用：

$('#table').tablesMergeCell({
    data: data.data,
    // automatic: false,
    cols: [0, 1, 2, 3],
    // rows: [3, 4],
});

二、element-ui动态合并行列

参考链接：https://www.jianshu.com/p/cd34129cbfce

element-ui通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

// data
private tableHeader: string[] = [];
private tableData: object[] = [];
private mergeConfig: any = {
    position: 0,
    rowsArr: [],
    colsArr: [],
    colsRange: [0, 3],
};
created() {
    this.init();
}
activated() {
    //
}
mounted() {
    //
}
// 初始化函数
init() {
    this.getData();
    // 挂载函数
    this.getRowsArr(this.tableData);
    this.getColsArr(this.tableData);
}
getData() {
    let title = ['系统', '楼层', '区域', '机组编号', '1号', '2号', '3号', '合计', ];
    this.tableHeader = title;
    let data = [
        ['系统1', '楼层1', '区域1', '设备1', 1, 2, 3, 4],
        ['系统1', '楼层1', '区域2', '设备2', 1, 2, 3, 4],
        ['系统1', '楼层1', '区域2', '设备3', 1, 2, 3, 4],
        ['系统1', '楼层2', '区域3', '设备4', 1, 2, 3, 4],
        ['系统1', '楼层2', '区域3', '设备5', 1, 2, 3, 4],
        ['系统1', '楼层2', '区域3', '设备6', 1, 2, 3, 4],
        ['系统1', '合计', '合计', '合计', 1, 2, 3, 4],
        ['系统2', '楼层A', '区域4', '设备7', 1, 2, 3, 4],
        ['系统2', '楼层B', '区域5', '设备8', 1, 2, 3, 4],
        ['系统2', '楼层B', '区域5', '设备9', 1, 2, 3, 4],
        ['系统2', '合计', '合计', '合计', 1, 2, 3, 4],
        ['系统3', '楼层C', '区域6', '设备10', 1, 2, 3, 4],
        ['系统3', '楼层C', '区域7', '设备11', 1, 2, 3, 4],
        ['系统3', '楼层C', '区域8', '设备12', 1, 2, 3, 4],
        ['系统3', '合计', '合计', '合计', 1, 2, 3, 4],
    ];
    let obj = new Object();
    data.forEach((item, index) = > {
        item.forEach((_item, _index) = > {
            obj[title[_index]] = _item;
        });
        this.tableData.push(obj);
        // 清空对象
        obj = new Object();
    });
}
// 处理纵向数据
getRowsArr(data: any[]) {
    let spanArr: number[] = [];
    for (let prop in data[0]) {
        for (let i = 0; i < data.length; i++) {
            if (i === 0) {
                spanArr.push(1);
                this.mergeConfig.position = 0;
            } else {
                if (data[i - 1][prop] === data[i][prop]) {
                    spanArr.push(0);
                    spanArr[this.mergeConfig.position] += 1;
                } else {
                    spanArr.push(1);
                    this.mergeConfig.position = i;
                }
            }
        }
        this.mergeConfig.rowsArr.push(spanArr);
        spanArr = [];
    }
}
// 处理横向数据
getColsArr(data: any[]) {
    let spanArr: number[] = [];
    let keyArr = Object.keys(data[0]);
    for (let item of data) {
        for (let i = this.mergeConfig.colsRange[0]; i <= this.mergeConfig.colsRange[1]; i++) {
            if (i === 0) {
                spanArr.push(1);
                this.mergeConfig.position = 0;
            } else {
                if (item[keyArr[i - 1]] === item[keyArr[i]]) {
                    spanArr.push(0);
                    spanArr[this.mergeConfig.position] += 1;
                } else {
                    spanArr.push(1);
                    this.mergeConfig.position = i;
                }
            }
        }
        this.mergeConfig.colsArr.push(spanArr);
        spanArr = [];
    }
}
// 返回合并数组
spanMethod({
    row, column, rowIndex, columnIndex
}) {
    if (this.mergeConfig.colsRange[0] <= columnIndex && columnIndex <= this.mergeConfig.colsRange[1]) {
        const _row = this.mergeConfig.rowsArr[columnIndex][rowIndex];
        const _col = this.mergeConfig.colsArr[rowIndex][columnIndex];
        return [_row, _col];
    }
}

页面调用：

<el-table :data="tableData" :span-method="spanMethod" border style=" 1000px;">
    <el-table-column v-for="(item, i) of tableHeader" :key="i" :label="item" :prop="item" align="center"></el-table-column>
</el-table>