将 expandIcon 图标向右移动，并从展开的表格 Ant Design 和 React.js 中删除空白区域

Question

我需要你的帮助来解决这个问题。

我正在使用蚂蚁设计表，但我被困在这里。我希望展开行图标应该在表的右侧(在给定的沙箱代码中删除旁边(，它在左侧，当我们展开一行时，扩展的内容在左侧留下一个小空间，我想删除它。即它不应该有任何多余的空间。请帮帮我，伙计们。

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

Answer 1

一个潜在的解决方案可能是利用expandIconColumnIndex，一个可以传递给可扩展的 antdTable组件的道具，以及为扩展器添加额外的行。通过这样做，您可以将expandIconColumnIndex设置为最后一行(空(的索引(在本例中，索引为 4(，这样图标将显示在Delete操作的右侧。这将避免在左侧创建空间，并将图标移动到最右侧的列。这是给定代码时需要最少重构的方法。以下是您更新的专栏。

const columns = [
{ title: "Name", dataIndex: "name", key: "name" },
{ title: "Age", dataIndex: "age", key: "age" },
{ title: "Address", dataIndex: "address", key: "address" },
{
title: "Action",
dataIndex: "",
key: "x",
render: (r) => <div>
<a>Delete</a> 
<a onClick={()=>expandRows(r.key)}>  ex</a>
</div>
},
{ title: "", dataIndex: "", key: "expand", width: 1},
];

这是更新的Table.

<Table
expandIconColumnIndex={4}
columns={columns}
dataSource={data}
expandIcon={({ expanded, onExpand, record }) =>
expanded ? (
<UpOutlined style={{float: 'right'}} onClick={e => onExpand(record, e)} />
) : (
<DownOutlined onClick={e => onExpand(record, e)} />
)
}
expandable={{
expandedRowRender: record => <p style={{ margin: 0 }}>{renderTable()}</p>
}}
/>

为了从嵌套表中删除左侧空间，您需要覆盖 Ant Design 的 CSS，其中包括嵌套表的更多填充，以充当缩进并将其与表的其余部分区分开来。我建议您保持原样，但是如果您真的不想拥有该空间，则可以通过将classNameparentTable添加到第一个表，然后为嵌套表(在renderTable中找到(nestedTable来覆盖它们的样式。然后将以下 CSS 添加到样式表中。

.parentTable
table
tbody
.ant-table-expanded-row.ant-table-expanded-row-level-1
> td {
padding: 0px !important;
}
.nestedTable > div > div > div {
width: 100%;
margin-left: 0px !important;
margin-right: 0px !important;
}

这是工作代码沙箱。

Answer 2

对于那些将来来做这件事的人来说，正确的方法是使用 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 表上的展开/最小化按钮。

希望这对你有帮助。