Question

我有下表：

  <Table
    bordered
    loading={false}
    columns={this.columns(currentUser, fields)}
    dataSource={selectedAssets}
    expandedRowRender={(rec) => <AssetsExtraInformationTable {...rec} />}
    rowKey={(record) => record.id}
    pagination={false}
  />

但是我只愿意在有要扩展的数据时显示+的{{1}}按钮。
我在API doc中找不到任何东西，在React component Table API中也没有找到允许我这样做的东西，所以我想知道是否有任何骇人听闻的方法可以做到这一点。

Answer 1

如果在单独的列中显示+，则可以为此定义render选项，即：

render: (text, record, index) => record.hasExpandData ? <div>{text}</div> : null,

Answer 2

从Antd版本3.11.3开始，您可以使用expandIcon prop 示例：

const CustomExpandIcon = props => {
  if (!props.record.subData) return null; //nothing to expand
  if (props.expanded) {
    return (
      <a onClick={e => props.onExpand(props.record, e)}>
        <Icon type="minus" />
      </a>
    );
  } else {
    return (
      <a onClick={e => props.onExpand(props.record, e)}>
        <Icon type="plus" />
      </a>
    );
  }
};

然后：

 <Table expandIcon={p => <CustomExpandIcon {...p} />} />

有条件地显示蚂蚁表的扩展行

2 个答案: