rsuite 表的固定或冻结列不起作用

问题描述

我使用 RSuite Table 创建了一个表格，并尝试在向右滚动时修复表格左侧的几列，因为我的表格有很多列。但是列没有留在视图中

<Table data={rows} height={700} virtualized  onRowClick={data => { console.log(data) }}>
  {
    columns.map((value,index) => {
      if (value.fixed) {
      return <Column width={value.width} fixed="left">
        <HeaderCell>{value.name}</HeaderCell>
        <Cell dataKey={value.key} />
      </Column>
      } else {
        return <Column width={value.width}>
        <HeaderCell>{value.name}</HeaderCell>
        <Cell dataKey={value.key} />
      </Column>
      }
    })
  }
</Table>

我的列初始化如下。

let columns = [
  { key: 'date',name: 'date',width: 100,fixed: 'left' },{ key: 'productId',name: 'Product Id',width: 120,{ key: 'country',name: 'Country',fixed: 'left' }
]

Object.keys(EXTRA_COLUMNS).forEach(factor => {
  columns.push({ key: factor,name: factor,width: factor.length * 10 })
});

this.setState({ columns: columns,rows: data.rows,rowCount: this.state.rowCount + data.rows.length,loading: loading });

所有列中的数据都加载得很好。唯一的问题是应该冻结的前 3 列没有保持冻结。我曾尝试仅使用 <Column width={value.width} fixed> 并调试并达到前 3 列的 if(value.fixed) 内部分的断点，但没有成功冻结列。

知道如何解决这个问题吗？

解决方法

我发现如果我希望固定适用，我需要在不使用循环逻辑的情况下添加列。至少对于需要修复的列。因此，我将这些列从迭代中移出，并将它们硬编码在 Table 标记下。

<Table data={rows} height={700} virtualized headerHeight={80} onRowClick={data => { console.log(data) }}>
  <Column width={100} fixed>
    <HeaderCell>Date</HeaderCell>
    <Cell dataKey='date' />
  </Column>
  <Column width={100} fixed>
    <HeaderCell>Product Id</HeaderCell>
    <Cell dataKey='productId' />
  </Column>
  <Column width={100} fixed>
    <HeaderCell>'Country'</HeaderCell>
    <Cell dataKey='country' />
  </Column>
  
  {
    Object.keys(EXTRA_COLUMNS).map(factor => {
      return <Column width={factor.length * 10}>
        <HeaderCell>{factor}</HeaderCell>
        <Cell dataKey={factor} />
      </Column>
    })
  }
  
</Table>