Question

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

Answer 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}
/>

P.S。这只会按您的要求自定义展开图标，您将不得不编写更多代码行以使新图标可点击并传递记录以在展开区域中显示数据。

请尝试一下，如果您需要onClick（）部分的帮助，请告诉我！

Answer 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来扩展行。

Answer 3

尝试添加

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

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

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

表ant d扩展行图标

3 个答案: