element-plus
element-plus copied to clipboard
[Component] [table-v2] Virtualized Table 虚拟表格多列跨行不生效
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
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)