ElTable 合并相同行

博主：迷途橘
发布时间：2024 年 01 月 05 日
39 次浏览
暂无评论
1122字数
分类： vue js 小方法

```js
const objectSpanMethodV1 = ( { row, column, rowIndex, columnIndex } ) => {
    const mergeKeys = {
        0: 'title',  // 第一列合并依据
        6: 'num'  // 第六列合并依据
    };

const mergeColumnList = [ 0, 6 ]; // 在第几列合并行
    const tableData = props.tableData.listV1; // 渲染数据
    let rowspan = 0;

// 检查当前列是否在需要合并的列中
    if ( mergeColumnList.includes( columnIndex ) ) {
        const basisKey = mergeKeys[ columnIndex ]; // 获取当前列的合并依据

// 如果当前行的依据字段为空字符串，则不合并
        if ( row[ basisKey ] === '' ) {
            return [ 1, 1 ]; // 不合并，返回 0
        }

// 如果是第一行或者当前行的 basisKey 和上一行的 basisKey 不同
        if ( !rowIndex || row?.[ basisKey ] !== tableData[ rowIndex - 1 ]?.[ basisKey ] ) {
            // 计算需要合并的行数
            for ( let i = rowIndex; i < tableData.length; i++ ) {
                if ( tableData[ i ]?.[ basisKey ] === row?.[ basisKey ] ) rowspan++;
            }
            return [ rowspan, 1 ]; // 返回合并的行数和列数
        }

return [ 0, 0 ]; // 如果不需要合并，返回 0
    }

return [ 1, 1 ]; // 对于不需要合并的列，返回默认值
}
```

> :span-method="objectSpanMethod"

最后修改：2025 年 03 月 27 日