如何正确缩进（对齐）溢出行标签？ - （蚂蚁设计表，树数据）

Question

我正在构建一个自定义组件，在其中使用Ant Design提供的表组件。对于大多数零件，一切都按预期工作，但是存在一个“小”问题。

我正在使用“树数据”（即嵌套的JSON）数据来填充 Table 组件。由于固定的列大小（这是一项要求），因此在质量检查期间已注意到 Row的标签如果溢出（即在新行开始）。

因此，我的问题是，如何缩进标签，以便当标签在新线上启动时，它是从这样的初始凹痕开始的：

目标将是将标签“挤压”在绿色破折的容器中。

此链接 您可以找到一个演示（与蚂蚁设计文档中的次要更改相同），该演示复制了我正在处理的问题。

1. 打开链接
2. 扩展第一行（即John Brown Sr。），因为它在上图中扩展。

Answer 1

您可以将显示“ Flex”应用于列

// index.css
.name-column {
  display: flex;
}

// demo.js
// column
...
...
...
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      className: 'name-column'
    },
...
...
...