关于element-plus Virtualized Table 虚拟表格多列跨行不生效的问题

Question

<template #row="props">
   <Row v-bind="props" />
   <Row2 v-bind="props" />
</template>

/**
 *  第一列跨行
 */
const row1 = 0
columns[row1].rowSpan = ({ rowIndex } :any) =>
    rowIndex % 3 === 0 && rowIndex <= data.value.length - 3 ? 3 : 1
const Row = ({ rowData, rowIndex, cells, columns }) => {
    const rowSpan = columns[row1].rowSpan({ rowData, rowIndex })
    if (rowSpan > 1) {
        const cell = cells[row1]
        const style = {
            ...cell.props.style,
            backgroundColor: 'var(--el-color-white)',
            height: `${rowSpan * 50 - 1}px`,
            alignSelf: 'flex-start',
            zIndex: 1,
        }
        cells[row1] = cloneVNode(cell, { style })
    }
    return cells
}
/**
 *  第二列跨行
 */
const row2 = 1
columns[row2].rowSpan = ({ rowIndex } :any) =>
    rowIndex % 3 === 0 && rowIndex <= data.value.length - 3 ? 3 : 1
const Row2 = ({ rowData, rowIndex, cells, columns }) => {
    const rowSpan = columns[row2].rowSpan({ rowData, rowIndex })
    if (rowSpan > 1) {
        const cell = cells[row2]
        const style = {
            ...cell.props.style,
            backgroundColor: 'var(--el-color-white)',
            height: `${rowSpan * 50 - 1}px`,
            alignSelf: 'flex-start',
            zIndex: 1,
        }
        cells[row2] = cloneVNode(cell, { style })
    }
    return cells
}

为什么只有第一列能合并，第二列却没生效？
详细代码链接：http://test.mgbubu.com/index.php/api/index/toLink?url=RfomdSl1NXWvqMh

Answer 1

不能搞两个 Row，删了 Row2，在 Row 中设置前两个单元格样式即可
参考代码：

/**
* 第1、2列跨3行
*/
const rowSpan = 3
const rowSpanStyle = {
    backgroundColor: 'var(--el-color-white)',
    height: `${rowSpan * 50 - 1}px`,
    alignSelf: 'flex-start',
    zIndex: 1,
}
const Row = ({ rowData, rowIndex, cells, columns }) => {
    if (rowIndex % rowSpan === 0 && rowIndex <= data.value.length - rowSpan)
        for (const rowSpanIndex of [0, 1])
            Object.assign(cells[rowSpanIndex].props.style, rowSpanStyle)
    return cells
}

效果：

---

这个方法发现一个新问题，就是如果有一列用了fixed: TableV2FixedDir.RIGHT,就会报错TypeError: Cannot read properties of undefined (reading 'props')

是 Element Plus 的坑，测试了一下：

1. 没有 fixed，Row 会被调用 6 次，即每行 1 次；
2. 只有 fixed: TableV2FixedDir.LEFT，Row 会被调用 12 次，即每行 2 次，第 2 次仅传入 LEFT 的列
3. 只有 fixed: TableV2FixedDir.RIGHT，和 2 的情况类似，第 2 次仅传入 RIGHT 的列
4. 同时有 LEFT 和 RIGHT，Row 会被调用 18 次，即每行 3 次，第 2 次仅传入 LEFT 的列，第 3 次仅传入 RIGHT 的列

可以考虑这种做法，给需要跨行的 column 加一个属性如 rowSpan: 3，然后在 Row 中判断每一列的 rowSpan 是否 > 1

/**
* 第1、2列跨3行
*/
const Row = ({ rowData, rowIndex, cells, columns }) => {
    for (let i = 0; i < columns.length; ++i) {
        const { rowSpan } = columns[i]
        if (rowSpan > 1 && rowIndex % rowSpan === 0 && rowIndex <= data.value.length - rowSpan) {
            Object.assign(cells[i].props.style, {
                backgroundColor: 'var(--el-color-white)',
                height: `${rowSpan * 50 - 1}px`,
                alignSelf: 'flex-start',
                zIndex: 1
            })
        }
    }
    return cells
}

Playground: https://element-plus.run/#eyJ...