将expandIcon图标移至右侧，并从扩展表Ant Design reatc js中删除空白空间

Posted 2023-01-10

我需要您的帮助来解决此问题。

我正在使用Ant Design表，并且被卡在这里。我希望扩展行图标应该在表格当前的右侧（在给定的沙箱代码中删除，然后在它的左侧），当我们扩展一行时，扩展内容在左侧留一个小空间，我想将其删除。也就是说，它不应有任何多余的空间。伙计们，请帮帮我。

沙盒代码：https://codesandbox.io/s/ancient-mountain-ft8m1?file=/index.js

答案

对于将来使用此功能的人，正确的方法是使用antd桌子道具。

antd表的expandIcon属性采用返回反应节点的函数。

customExpandIcon(props) 
    if (props.expanded) 
        return <a style= color: 'black'  onClick=e => 
            props.onExpand(props.record, e);
        ><Icon type="minus" /></a>
     else 
        return <a style= color: 'black'  onClick=e => 
            props.onExpand(props.record, e);
        ><Icon type="plus" /></a>
    

然后放在表中：

<Table
    expandIcon=(props) => this.customExpandIcon(props)
    ...
/>

这将使您可以使用antd中的图标组合来代替antd表上的展开/最小化按钮。

希望这会对您有所帮助。