如何在反应虚拟化中为 table 禁用高度属性？

Question

我正在使用 react-virtualised 在我的 React 应用程序中呈现 html table。元素上的高度属性默认按要求设置。现在我不想将高度设置为 table，但我想将其设置为 max-height。原因是设置了一个固定的高度，一次可以显示20条记录，如果api returns只有3条记录，下面有一个巨大的空白和边框。我已经浏览了文档，但找不到任何修复方法。

          <Table
            rowClassName={({ index }) => rowClassName({ index })}
            headerHeight={50}
            height={700}  
            width={1200}
            rowHeight={40}
            rowCount={props.exceldata.length}
            rowGetter={({ index }) => props.exceldata[index]}
          >
            <Column label="email" dataKey="email" width={450} />
            <Column label="JoinDate" dataKey="JoinDate" width={200} />
            <Column label="isVip" dataKey="isVip" width={120} />
            <Column label="onBoarding" dataKey="onBoarding" width={150} />
          </Table>

我尝试将“autoHeight”属性添加到 table，但我只能看到 table 的 header 和整个 body小线。我还跟踪了节点模块中某些文件的高度属性，在高度属性旁边添加了一个问号以使其成为可选的，但 table 根本没有被渲染。

此外，如果我在高度属性上添加 max-height，它也不起作用。如果有人能帮我找到一个 React-virtualised 解决方案，甚至 CSS 修复也可以，我会很高兴。不知何故我可以覆盖高度属性并使 table 只看到 max-height 属性.

Answer 1

所以我想出了一个 javascript 的方法来做到这一点。我将表达式传递给 height 属性以设置 20 行的最小高度或行数的高度（如果小于 20.

height={Math.min(700, props.exceldata.length * 40 + 50)}

'props.exceldata' 是包含 json objects/table 行的数组。 700(px) 是显示的最小高度，一次可以显示 20 条记录。或者，如果数组中的行少于 20，我将乘以 no 来计算这些行的高度。每行高度（40px）的行数。而'50'是table.

的页眉高度

如何在反应虚拟化中为 table 禁用高度属性？

How to disable height property for table in react virtualised?

html

css

node-modules

reactjs

react-virtualized

如何在反应虚拟化中为 table 禁用高度 属性？

How to disable height property for table in react virtualised?

html

css

node-modules

reactjs

react-virtualized

如何在反应虚拟化中为 table 禁用高度属性？