javascript - react BaseTable rowSpan "flickering"

Question

问题

如交互式 BaseTable API Playground 所示 here ，当我开始滚动时，跨行会闪烁开/关。

这是库中的一个已知错误，并且已经发布了很多关于它的问题: https://github.com/Autodesk/react-base-table/issues/156

但是，似乎没有任何可用的修复方法。那里的评论指出可以做到这一点，但我不确定这将放在代码中的什么地方:

      const overscanBackward =
        !isScrolling || verticalScrollDirection === 'backward'
          ? Math.max(1, overscanCountResolved)
          : 1;

表格的样子

代码

与 playground 中的代码相同:

    const data = [
    {
      key: 1,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 2,
      "column-0": "Row 1 - Col 0",
      "column-1": "Row 1 - Col 1",
      "column-2": "Row 1 - Col 1",
      "column-3": "Row 1 - Col 1",
      "column-4": "Row 1 - Col 1"
    },
    {
      key: 3,
      "column-0": "Row 2 - Col 0",
      "column-1": "Row 2 - Col 1",
      "column-2": "Row 2 - Col 1",
      "column-3": "Row 2 - Col 1",
      "column-4": "Row 2 - Col 1"
    },
    {
      key: 4,
      "column-0": "Row 3 - Col 0",
      "column-1": "Row 3 - Col 1",
      "column-2": "Row 3 - Col 1",
      "column-3": "Row 3 - Col 1",
      "column-4": "Row 3 - Col 1"
    },
    {
      key: 5,
      "column-0": "Row 4 - Col 0",
      "column-1": "Row 4 - Col 1",
      "column-2": "Row 4 - Col 1",
      "column-3": "Row 4 - Col 1",
      "column-4": "Row 4 - Col 1"
    },
    {
      key: 6,
      "column-0": "Row 5 - Col 0",
      "column-1": "Row 5 - Col 1",
      "column-2": "Row 5 - Col 1",
      "column-3": "Row 5 - Col 1",
      "column-4": "Row 5 - Col 1"
    },
    {
      key: 7,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 8,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 9,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 10,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 11,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 12,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 13,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 14,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 15,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 16,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    }
  ];

  const columns = [
    {
      dataKey: "column-0",
      key: "column-0",
      resizable: true,
      title: "Column 0",
      width: 150
    },
    {
      dataKey: "column-1",
      key: "column-1",
      resizable: true,
      title: "Column 1",
      width: 150
    },
    {
      dataKey: "column-2",
      key: "column-2",
      resizable: true,
      title: "Column 2",
      width: 150
    },
    {
      dataKey: "column-3",
      key: "column-3",
      resizable: true,
      title: "Column 3",
      width: 150
    },
    {
      dataKey: "column-4",
      key: "column-4",
      resizable: true,
      title: "Column 4",
      width: 150
    }
  ];

const rowSpanIndex = 0

const rowSpanArr = [5,2,3,2,5];
  columns[rowSpanIndex].rowSpan = ({ rowData, rowIndex }) => {
  console.log(rowIndex)
        
    let acc = 0
    for (let [index, x] of rowSpanArr.entries()){
      if (acc === rowIndex){
        acc = acc + x
        console.log("rowIndex:", rowIndex)
        console.log("rowSpanArr[index]:", rowSpanArr[index])
        return rowSpanArr[index]
      } 
      console.log(acc)
      acc = acc + x
    }
    
 };

const rowRenderer = ({ rowData, rowIndex, cells, columns }) => {
  const rowSpan = columns[rowSpanIndex].rowSpan({ rowData, rowIndex })
  if (rowSpan > 1) {
    const cell = cells[rowSpanIndex]
    const style = {
      ...cell.props.style,
      backgroundColor:"powderblue",
      height: rowSpan * 50 - 1,
      alignSelf: 'flex-start',
      zIndex: 1,
    }
    cells[rowSpanIndex] = React.cloneElement(cell, { style })
  }
  return cells
}

export default () => (
  <Table
    fixed
    columns={columns}
    data={data}
    rowRenderer={rowRenderer}
    overscanRowCount={2}
  />
)

有没有人知道临时修复会是什么样子？我真的需要这个功能..

Answer 1

已找到解决方案!下面的代码是一个更复杂的例子，但我认为可以使用该过程。

columns[rowSpanIndex].rowSpan = ({ rowIndex }) => {
    let acc = 0;
    for (let [index, x] of rowSpanArr.entries()) {
      if (acc === rowIndex) {
        acc = acc + x;

        return rowSpanArr[index];
      }

      acc = acc + x;
    }
  };

const rowRenderer = ({ rowData, rowIndex, cells, columns }) => {
    // for the rows which should not span across any other rows
    const rowSpan = columns[rowSpanIndex].rowSpan({ rowData, rowIndex });
    if (rowSpan === undefined) {
      const cell = cells[rowSpanIndex];
      let style = {
        ...cell.props.style,
        backgroundColor: "white",
        color: "white",
        alignSelf: "flex-start",
        zIndex: 3
      };

      cells[rowSpanIndex] = React.cloneElement(cell, { style });
    }
    if (rowSpan > 1) {
    // for the spanning rows
      const cell = cells[rowSpanIndex];
      const style = {
        ...cell.props.style,
        backgroundColor: "white",
        height: rowSpan * 48 - 1,
        alignSelf: "flex-start",
        zIndex: 1
      };
      cells[rowSpanIndex] = React.cloneElement(cell, { style });
    }

与 CSS 一起

.BaseTable__row-cell{
  align-items: flex-start;
  }