elementui 合并table表格

• 多行或多列共用一个数据时，可以合并行或列。

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

• <el-table :row-class-name="rowClassName" @cell-mouse-enter="cellMouseEnter" @cell-mouse-leave="cellMouseLeave" :span-method="arraySpanMethod" :data="computedSlotList" border style="width: 100%" v-loading="loading" > </eltable>
  <script>
  //获取的原数组要进行排序，也是筛选过的数组
  this.filterTotalArray = res.rows
              // 先按 cluster_name 对数据进行排序
              this.filterTotalArray.sort( ( a, b ) => {
                if ( a.cluster_name === b.cluster_name ) {
                  // 当 cluster_name 相同时，按照 db_id 排序
                  return a.db_id - b.db_id;
                } else {
                  // 不同 cluster_name 之间任意排序，这里选择升序
                  return a.cluster_name.localeCompare( b.cluster_name );
                }
              } );
              this.findMargeDataInfo( this.filterTotalArray )
   findMargeDataInfo( data ) {
          this.margeArr.forEach( ( key ) => {
            let count = 0; // 记录合并行的起始位置
            this.margeObj[ key ] = [];
            let currentCluster = null; // 用于存储当前的 cluster_name
            data.forEach( ( item ) => {
              const clusterName = item[ key ]; // 获取 cluster_name 的值，忽略顺序问题
              if ( currentCluster === null || clusterName !== currentCluster ) {
                count += 1;
                currentCluster = clusterName;
                this.margeObj[ key ].push( 1 ); // 添加新的合并标志
              } else {
                this.margeObj[ key ][ count - 1 ] += 1; // 更新上一行的合并数量
                this.margeObj[ key ].push( 0 ); // 添加新的合并标志
              }
            } );
          } );
        },
        arraySpanMethod( {
          row,
          column,
          rowIndex,
          columnIndex
        } ) {
          let isIncludesProperty = this.margeArr.includes( column.property )
          if ( isIncludesProperty ) {
            let mergeRowCount = this.margeObj[ column.property ][ rowIndex ]
            if ( mergeRowCount ) {
              return [ mergeRowCount, 1 ]
            } else {
              return [ 0, 0 ]
            }
          }
        },
        rowClassName( {
          row
        } ) {
          return row.cluster_name === this.currentCommon ? 'my-hover-row' : ''
        },
        cellMouseEnter( row, column, cell, event ) {
          this.currentCommon = row.cluster_name
        },
        cellMouseLeave() {
          this.currentCommon = -1
        },
  </script>
   

  ok🦌