Antd：是否可以在其中一个单元格内移动 table 行扩展器？

Question

我有一个 antd table，其中一列中的数据可能会变得非常大。当行被展开时，我会完整地显示这些数据，但是因为有很多数据的单元格在屏幕的右侧，而扩展器图标在屏幕的左侧，所以不是很直观。我想做的是将扩展器图标移动到实际单元格内，以便用户知道他们可以单击 + 来查看其余数据。

提前致谢。

Answer 1

是的，你可以而且你必须更深入地挖掘他们的文档...

根据 rc-table docs，您可以使用 expandIconColumnIndex 作为要添加 + 的索引列，还必须添加 expandIconAsCell={false} 以使其呈现为单元格的一部分。

见Demo

Answer 2

这就是使任何列都可以消耗的方法。首先在你的组件 state

中添加 expandedRowKeys

state = {
    expandedRowKeys: [],
  };

那么你需要添加onExpand和updateExpandedRowKeys

这两个函数

<Table
    id="table-container"
    rowKey={record => record.rowKey}
    className={styles['quote-summary-table']}
    pagination={false}
    onExpand={this.onExpand}
    expandedRowKeys={this.state.expandedRowKeys}
    columns={columns({
        updateExpandedRowKeys: this.updateExpandedRowKeys,
    })
    }
    dataSource={this.data}
    oldTable={false}
/>

这就是您需要定义函数的方式在 expandedRowKeys 我们将永远拥有更新扩展 rowKeys

的值

onExpand = (expanded, record) => {
    this.updateExpandedRowKeys({ record });
  };

  updateExpandedRowKeys = ({ record }) => {
    const rowKey = record.rowKey;
    const isExpanded = this.state.expandedRowKeys.find(key => key === rowKey);
    let expandedRowKeys = [];
    if (isExpanded) {
      expandedRowKeys = expandedRowKeys.reduce((acc, key) => {
        if (key !== rowKey) acc.push(key);
        return acc;
      }, []);
    } else {
      expandedRowKeys.push(rowKey);
    }
    this.setState({
      expandedRowKeys,
    });
  }

最后，您需要调用函数 updateExpandedRowKeys 对于您希望展开折叠功能可用的任何列。甚至可以实现多列。

export const columns = ({
    updateExpandedRowKeys,
  }) => {
    let columnArr = [
      {
        title: 'Product',
        key: 'productDes',
        dataIndex: 'productDes',
        className: 'productDes',
        render: (text, record) => (
          <span onClick={rowKey => updateExpandedRowKeys({ record })}>
            {text}
          </span>
        ),
      }, {
        title: 'Product Cat',
        key: 'productCat',
        dataIndex: 'productCat',
        className: 'product-Cat',
      }]
    }

Antd：是否可以在其中一个单元格内移动 table 行扩展器？

Antd: Is it possible to move the table row expander inside one of the cells?

reactjs

antd