-
多行或多列共用一个数据时,可以合并行或列。
-
通过给
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🦌
elementui 合并table表格
最新推荐文章于 2024-11-16 16:44:51 发布