element table 合并行

记录

第一步：判断每一行的合并行数

 tableData: [],//表格数据
 spanArr: [],//记录合并行数
 pos: 0

在获取table数据后调用  checkRowsNum 方法，判断每一行的合并行数

    checkRowsNum() {
      let that = this;
      let rowNum = 0;
      this.tableData.forEach((item, index) => {
        if (index == 0) {
          that.spanArr.push(1);
          that.pos = 0;
        } else {
          if (item.ruleId == that.tableData[index - 1].ruleId) {
            that.spanArr[that.pos] += 1;
            that.spanArr.push(0);
          } else {
            that.spanArr.push(1);
            that.pos = index;
          }
        }
      });
      return rowNum;
    }

第二不:通过span-method方法实现合并行或列

bc-table为自定封装的el-table组件

<bc-table
      :list="tableData"
      style="min-height:100px;max-heigh:800px;"
      :span-method="rowMerge"
      v-if="tableData && tableData.length > 0"
    ></bc-table>

 实现合并行效果

    rowMerge({ row, column, rowIndex, columnIndex }) {
      if (this.data.groupFlag != "1") return;
      if (columnIndex === 0) {
        let rowsNum = 0;
        rowsNum = this.spanArr[rowIndex];
        return {
          rowspan: rowsNum,
          colspan: 1
        };
      }
    },