将 ExpandIcon 图标移至右侧并删除展开表中的空白区域 Ant Design 和 React.js

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

我正在使用 Ant Design 表，但我被困在这里。我希望展开行图标应该位于当前表的右侧（在给定的沙箱代码中删除），它位于左侧，当我们展开一行时，展开的内容在左侧留下一个小空间，我想将其删除。即左边不应该有任何额外的空间。请帮帮我，伙计们。

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

一个潜在的解决方案可能是利用expandIconColumnIndex，一个可以传递给可扩展 antd 的 propTable组件以及为扩展器添加额外的行。通过这样做，您可以设置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;
}

这是工作中的代码沙箱 https://codesandbox.io/s/proud-dawn-97qp9?file=/index.js.