我需要你的帮助来解决这个问题。
我正在使用 Ant Design 表，但我被困在这里。我希望展开行图标应该在当前表的右侧（在给定的沙箱代码中删除旁边），当我们展开一行时，展开的内容在左侧留下一个小空间，我想将其删除。即它的左边不应该有任何额外的空间。请帮帮我，伙计们。
沙盒代码：https : //codesandbox.io/s/ancient-mountain-ft8m1? file =/index.js
将 expandIcon 图标向右移动并从扩展表中移除空白区域 Ant Design reatc js
IT技术
reactjs
antd
2021-05-08 02:13:06
2个回答
一个潜在的解决方案可能是利用expandIconColumnIndex，一个可以传递给可扩展 antdTable组件的props，以及为扩展器添加额外的行。通过这样做，您可以将 设置为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，它包括更多的用于嵌套表的填充以充当缩进并将其与表的其余部分区分开来。我建议你保持原样，但如果你真的不想有那个空间，你可以通过将 className 添加parentTable到第一个表中来覆盖它们的样式，然后添加到nestedTable嵌套表（在 中找到renderTable）。然后将以下 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;
}
这是工作代码和框。
对于以后遇到这个问题的人，正确的做法是使用 antd table props。
antd 表的 expandIcon 属性采用一个返回react节点的函数。
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 表上的扩展/最小化按钮。
希望这会帮助你。