element-ui table 合并行和列

应该不会再在简书写东西了加个外链就锁定

关键点：将数据映射为一个包含行列 rowspan colspan的二维数组

[  
  { id: '12987122', name: '合并', amount1: '234', amount2: '3.2', amount3: 10 },
  { id: '12987123', name: '合并', amount1: '165', amount2: '4.43', amount3: 12 },
  { id: '12987124', name: '合并', amount1: '324', amount2: '4.43', amount3: 9 },
  { id: '12987125', name: '合并', amount1: '621', amount2: '2.2', amount3: 17 },
  { id: '12987126', name: '合并', amount1: '539', amount2: '4.1', amount3: 15 }
]

[
    [ { "rowspan": 1, "colspan": 1 }, { "rowspan": 5, "colspan": 1 }, { "rowspan": 1, "colspan": 1 }, { "rowspan": 1, "colspan": 1 }, { "rowspan": 1, "colspan": 1 }],
    [ { "rowspan": 1, "colspan": 1 }, { "rowspan": 0, "colspan": 0 }, { "rowspan": 1, "colspan": 1 }, { "rowspan": 1, "colspan": 1 }, { "rowspan": 1, "colspan": 1 }],
    [ { "rowspan": 1, "colspan": 1 }, { "rowspan": 0, "colspan": 0 }, { "rowspan": 1, "colspan": 1 }, { "rowspan": 1, "colspan": 1 }, { "rowspan": 1, "colspan": 1 }],
    [ { "rowspan": 1, "colspan": 1 }, { "rowspan": 0, "colspan": 0 }, { "rowspan": 1, "colspan": 1 }, { "rowspan": 1, "colspan": 1 }, { "rowspan": 1, "colspan": 1 }],
    [ { "rowspan": 1, "colspan": 1 }, { "rowspan": 0, "colspan": 0 }, { "rowspan": 1, "colspan": 1 }, { "rowspan": 1, "colspan": 1 }, { "rowspan": 1, "colspan": 1 }]
]

<el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%">
      <el-table-column

    arraySpanMethod({ rowIndex, columnIndex }) {
      if (this.isMergeCell) {
        return this.mergeCellMap[rowIndex][columnIndex];
      } else {
        return [1, 1];
      }
    },
    getTableData() {
      const mergeCellMap = [];
      this.tableColumnsOrder = tableColumnsOrder;
      this.tableColumns = tableColumns;

      function setBeforLeftSpanInfo(rowIndex, columnIndex) {
        /* 第一列是index */
        if (columnIndex === 1) {
          mergeCellMap[rowIndex][columnIndex].colspan += 1;
          return;
        }
        const beforeLeftCellSpanInfo = mergeCellMap[rowIndex][columnIndex];
        if (beforeLeftCellSpanInfo.colspan === 0) {
          setBeforLeftSpanInfo(rowIndex, columnIndex - 1);
        } else {
          mergeCellMap[rowIndex][columnIndex].colspan += 1;
        }
      }
      function setBeforTopSpanInfo(rowIndex, columnIndex) {
        if (rowIndex === 0) {
          mergeCellMap[rowIndex][columnIndex].rowspan += 1;
          return;
        }
        const beforeTopCellSpanInfo = mergeCellMap[rowIndex][columnIndex];
        if (beforeTopCellSpanInfo.rowspan === 0) {
          setBeforTopSpanInfo(rowIndex - 1, columnIndex);
        } else {
          mergeCellMap[rowIndex][columnIndex].rowspan += 1;
        }
      }

      this.tableData = tableData.map((item, rowIndex) => {
        mergeCellMap[rowIndex] = mergeCellMap[rowIndex] || [];
        _.forEach(this.tableColumnsOrder, (prop, columnIndex) => {
          let spanInfo = { rowspan: 1, colspan: 1 };

          (currentCellValue => {
            /* 第一排第一个不用比 */
            if ([0, 1].includes(columnIndex)) {
              return;
            }
            /* 数值不合并 */
            if (isNumberLike(currentCellValue)) {
              return;
            }

            if (columnIndex > 1) {
              const beforeLeftCellProp = tableColumnsOrder[columnIndex - 1];
              const beforeLeftCellValue =
                tableData[rowIndex][beforeLeftCellProp];
              if (beforeLeftCellValue === currentCellValue) {
                spanInfo = { rowspan: 0, colspan: 0 };
                setBeforLeftSpanInfo(rowIndex, columnIndex - 1);
              }
            }

            if (rowIndex > 0) {
              const beforeTopCellValue = tableData[rowIndex - 1][prop];
              if (beforeTopCellValue === currentCellValue) {
                spanInfo = { rowspan: 0, colspan: 0 };
                setBeforTopSpanInfo(rowIndex - 1, columnIndex);
              }
            }
          })(tableData[rowIndex][prop]);

          mergeCellMap[rowIndex][columnIndex] = spanInfo;
        });
        return { thisIndex: rowIndex + 1, ...item };
      });

      this.mergeCellMap = mergeCellMap;
    }

···