reactjs - 将 expandIcon 图标向右移动并从扩展表中移除空白区域 Ant Design reatc js

Question

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

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

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

Answer 1

一个潜在的解决方案可能是利用 expandIconColumnIndex ，一个可以传递给可扩展 antd 的 prop Table组件以及为扩展器添加额外的行。通过这样做，您可以设置 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 来覆盖他们的风格。到你的第一张 table ，然后 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;
}

这是工作 codesandbox .