element-plus icon indicating copy to clipboard operation
element-plus copied to clipboard

[Component] [table-v2] Virtualized Table 虚拟表格多列跨行不生效

Open ttdms opened this issue 2 years ago • 0 comments

Bug Type: Component

Environment

  • Vue Version: 3.2.25
  • Element Plus Version: 2.2.9
  • Browser / OS: e.g. Chrome 96.0.4664.45 / MacOS 12.0.1
  • Build Tool: Vite

Reproduction

Related Component

  • el-table-v2

Reproduction Link

Link

Steps to reproduce

<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
}

What is Expected?

第一列和第二列跨行合并

What is actually happening?

只有第一列合并了

Additional comments

(empty)

ttdms avatar Jul 10 '22 06:07 ttdms