0

我使用 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, fixed: 'left' },
  { key: 'country', name: 'Country', width: 120, 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>并调试并到达if(value.fixed)前 3 列内部部分的断点，但冻结列没有运气。

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

4

1 回答 1

0

我发现如果我希望固定适用，我需要在不使用循环逻辑的情况下添加列。至少对于需要修复的列。所以我将这些列移出迭代并将它们硬编码在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>
于 2021-03-30T18:11:24.117 回答