可以合并的el-table

html

      <el-table :data="sourceTable"
                :border="true"
                :span-method="objectSpanMethod"
                style="width: 100%">
        <el-table-column prop="sourceDb"
                         label="来源库"
                         width="180">
        </el-table-column>
        <el-table-column prop="sourceSchema"
                         label="来源模式"
                         width="180">
        </el-table-column>
        <el-table-column prop="sourceTableEname"
                         label="来源表">
        </el-table-column>
        <el-table-column prop="dataTableCname"
                         label="已生成表">
          <template slot-scope="scope">
            {{scope.row.dataTableEname}}({{scope.row.dataTableCname }})
          </template>
        </el-table-column>
      </el-table>

      alreadyTableList: [],
      sourceTable: [],

    // 来源表弹窗
    sourceTableOpenFn() {
      this.sourceTable = arrTransferObj(this.alreadyTableList, false)
      if (this.sourceTable.length > 0) {
        this.open = true
      }
    },
        // 合并表格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex <= 2 && rowIndex == row.dbEnd - row.dbSize) {
        return {
          rowspan: row.dbSize,
          colspan: 1,
        }
      } else if (
        columnIndex <= 2 &&
        rowIndex < row.dbEnd &&
        rowIndex > row.dbEnd - row.dbSize
      ) {
        return {
          rowspan: 0,
          colspan: 0,
        }
      } else if (
        columnIndex === 3 &&
        rowIndex == row.tableEnd - row.tableSize
      ) {
        return {
          rowspan: row.tableSize,
          colspan: 1,
        }
      } else if (
        columnIndex === 3 &&
        rowIndex < row.tableEnd &&
        rowIndex > row.tableEnd - row.tableSize
      ) {
        return {
          rowspan: 0,
          colspan: 0,
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1,
        }
      }
    },

// 处理合并表格数据 三层数据
/** 数组转对象
* @param {Object} tree 原始数组
* @param {Object} field 是都拼接字段
*/
export function arrTransferObj (tree, field) {
    let list = []
    let dbEnd = 0
    let tableEnd = 0
    tree.forEach(db => {
        let dbSize = 0
        let sarr = []
        db.children.forEach(table => {

            if (field) {
                dbSize += table.children.length
                tableEnd += table.children ? table.children.length : 0
                table.children.forEach(col => {
                    const data = {
                        ...db,
                        // dbindex:db.dbindex,
                        ...table,
                        tableSize: table.children.length,
                        tableEnd: tableEnd,
                        ...col
                    }
                    sarr.push(data)
                });
            } else {
                tableEnd += 1
                const data = {
                    ...db,
                    // dbindex:db.dbindex,
                    ...table,
                    tableSize: 0,
                    tableEnd: tableEnd,
                }
                sarr.push(data)
                dbSize += 1
            }


        });
        dbEnd += dbSize
        for (const item of sarr) {
            item.dbSize = dbSize
            item.dbEnd = dbEnd
        }
        list.push(...sarr)
    });
    return list
}