element-plus [Component] [table-v2] Virtualized Table 纵跨行较大时渲染有问题

ff29svar  于 2个月前  发布在  其他
关注(0)|答案(3)|浏览(20)

Bug Type: Component

Environment

  • Vue Version: 3.2.37
  • Element Plus Version: 2.3.1
  • Browser / OS: chrome 116.0.5845.141
  • Build Tool: Vite

Reproduction

  • el-table-v2

Element Plus Playground

Steps to reproduce

const rowSpanIndex = 0
columns[rowSpanIndex].rowSpan = ({ rowIndex }) =>
  rowIndex % 8 === 0 && rowIndex <= data.length - 8 ? 8 : 1

What is Expected?

tablev2滚动的时候一直都显示合并的row0

What is actually happening?

columns[rowSpanIndex].rowSpan较大时tablev2滚动的时候会显示没有合并的row0

Additional comments

(empty)

5cnsuln7

5cnsuln71#

我发现滚动后隐藏了三行及以上表格时就会出现这个问题,滚动以后rowIndex不再从0开始,原本的纵跨就不存在了
我这里有一个方法,再配合修改纵跨单元格的数据,表面上看上去就没问题了 element plus playground

let minrowIndex=2
const Row = ({ rowData, rowIndex, cells, columns }) => {
  let rowSpan = columns[rowSpanIndex].rowSpan({ rowData, rowIndex })
   if(rowIndex%8!=0){
   minrowIndex=rowIndex>=2&&Math.min(rowIndex,minrowIndex)
   rowSpan=8-rowIndex%8
 }
 console.log(rowIndex)
  if (rowSpan > 1) {
    const cell = cells[rowSpanIndex]
    const style = {
      ...cell.props.style,
      backgroundColor: 'var(--el-color-primary-light-3)',
      height: `${rowSpan * 50 - 1}px`,
      alignSelf: 'flex-start',
      zIndex: rowSpan,
    }
    cells[rowSpanIndex] = cloneVNode(cell, { style })
  }
  return cells
}
dgiusagp

dgiusagp2#

有遇到这种的嘛,只要横向滚动,就会数据错行,请问有解决办法嘛

hiz5n14c

hiz5n14c3#

我的问题解决啦,我出现这个问题的原因是我动态获取列之后,又在代码里追加了列,导致出现了这个问题。

相关问题