react-virtualized 表列中的下拉渲染溢出

Question

我正在开发一个 React 应用程序，我正在渲染一个表格，其中 2 个列字段而不是包含文本包含一个下拉菜单，我在这些下拉菜单中有不同的选项，下拉菜单正在渲染但在打开下拉菜单时它被隐藏好像该行的大小有限，这是非常意外的。这是我的代码：

const StyledTable = styled(CommonInfiniteTable)`
  .ReactVirtualized__Table__Grid {
    overflow-y: visible !important;
  }

`;
export const StyledDropdownIcon = styled(Icon)`
  top: 1px !important;
  right: 5px !important;
`;
const rowHeight = 41;
const headerHeight = 30;
class DefaultCodeSetsTable extends React.Component {
  constructor(props) {
    super(props);

    this.codeDataGetter = this.codeDataGetter.bind(this);
    this.codeDescriptionDataGetter = this.codeDescriptionDataGetter.bind(this);
  }

  codeDataGetter = ({
      dataKey,
      rowData,
      rowIndex,
    }) => (
      <div>
        <Form.Select
          name='Code'
          value={this.props.codeSets.length ? this.props.codeSets[rowIndex][`${this.props.masterName}_code`] : ''}
          options={this.props.defaultCodeSetsList[rowIndex].codesOptions}
          onChange={this.handleDefaultCodeChange(rowIndex)}
          icon={
            <StyledDropdownIcon iconName={DownCheveron} iconSize='15' className='dropdown' />
              }
        />
      </div>

    )

    codeDescriptionDataGetter = ({
      dataKey,
      rowData,
      rowIndex,
    }) => (
      <div>
        <Form.Select
          className='drop'
          name='Code Description'
          value={this.props.codeSets.length ? this.props.codeSets[rowIndex][`${this.props.masterName}_code_description`] : ''}
          options={this.props.defaultCodeSetsList[rowIndex].codeDescOptions}
          onChange={this.handleDefaultDescriptionChange(rowIndex)}
          icon={
            <StyledDropdownIcon iconName={DownCheveron} iconSize='15' className='dropdown' />
              }
        />
      </div>
    )

    render() {
      const widthOfEachGrid = this.props.width / 16;
      const columns = (
        [<Column
          key={1}
          label='Master Name'
          dataKey='master_name'
          width={widthOfEachGrid * 2}
          cellDataGetter={defaultCellDataGetter}
        />,
          <Column
            className='column'
            key={2}
            label='Code'
            dataKey='code'
            width={widthOfEachGrid * 1}
            cellRenderer={this.codeDataGetter}
          />,
          <Column
            className='column'
            key={3}
            label='Code Description'
            dataKey='code_description'
            width={widthOfEachGrid * 2}
            cellRenderer={this.codeDescriptionDataGetter}
          />,


        ]
      );

      return (
        <StyledTable
          height={this.props.height}
          width={this.props.width}
          headerHeight={headerHeight}
          rowHeight={rowHeight}
          rowRenderer={this.rowRenderer}
          rowCount={this.props.codeSets.length}
          rowGetter={({ index }) => this.props.codeSets[index]}
          LoadingRow={this.props.LoadingRow}
          overscanRowCount={5}
          tabIndex={-1}
          className='ui very basic small single line striped table'
          columnsList={columns}
        />
      );
    }
}

在上表中，我有 3 列，其中 1 是纯文本，另外两列是带有可供选择的选项的下拉列表，当我打开下拉列表时，这是行为：

选项被隐藏，因为有溢出，任何关于这方面的线索肯定会有帮助！

Answer 1

在此评论中找到一个示例（确切的类名可能不同）：https://stackoverflow.com/a/53646058

我会在您的

const StyledTable = styled(CommonInfiniteTable)

中添加类似于下面的内容，以便行和列也可以看到溢出。

.ReactVirtualized__Table__rowColumn,
.ReactVirtualized__Table__row {
  overflow: visible !important;
}