表格 antd 可扩展行图标答案

【问题标题】：Table ant d expand able row icon表格 antd 可扩展行图标
【发布时间】：2019-06-14 05:15:17
【问题描述】：

这可以设置可扩展图标列的宽度、高度（+ 号）还是可以呈现自定义图标？基本上我想控制可扩展列和“名称”列之间的间距。

【问题讨论】：

【解决方案1】：

您现在可以添加

expandIcon={record => <i>expand</i>}

在道具中的 expandRowRender 线下方。所以它看起来像：

<Table
columns={columns}
expandedRowRender={record => <p style={{ margin: 0 }}>{record.description}</p>}
expandIcon={record => <i>expand</i>}
dataSource={data}
/>

附：这只会根据您的要求自定义展开图标，您必须编写更多代码行以使 新图标 可点击并传递记录以在展开区域中显示数据。

请试一试，如果您需要有关 onClick() 部分的帮助，请告诉我！

【讨论】：

【解决方案2】：

我知道为时已晚，但它可能会帮助一些新人。

<Table
        size="small"
        dataSource={getDataSource()}
        locale={{ emptyText: "No Data found" }}
        expandedRowRender={expandedRowRender}
        expandIcon={record => showExpandIcon(record)}
        columns={getColumn()}
      />

现在在您的 showExpandIcon 自定义函数中，您可以返回任何您想要的自定义图标。

showExpandIcon(record){
    const { expanded, onExpand } = record;
    if(expanded){
        return <CustomIcon onClick={e=>{onExpand(record, e)}}/>
    }
    else{
        return <SomeOtherCustomIcon onClick={e=>{onExpand(record, e)}}
    }

onExpand 是一个事件，您需要将自定义图标的 onClick 传递给该事件以展开行。

【讨论】：

【解决方案3】：

尝试添加

expandIcon={record => <i>expand</i>}

在道具中的 expandedRowRender 行下方。所以它看起来像：

// 像这样我们可以在 table props 中添加

 <Table
   ...props
    **expandedRowRender={record => <p style={{ margin: 0 }}>}**
    />

【讨论】：

请对您的回答进行详细解释，以便下一位用户更好地理解您的回答。