根据蚂蚁设计表中的缩进水平更改儿童行的背景颜色

发布于 2025-01-25 06:59:17 字数 781 浏览 1 评论 0原文

我正在使用蚂蚁设计表来显示树数据。我需要做的是对每个缩进水平的颜色颜色不同,以使其更容易区分。

以下是我想如何设置每一行的示例。

- Parent 1 (White)
   - Child 1 (Grey)
   - Child 2 (Grey)
      - Child 1 (Darker grey)
          - Child 1 (Even darker grey)
   - Child 3 (Grey)
       - Child 1 (Darker grey)

- Parent 2 (White)
   - Child 1 (Grey)

请在此处查看Ant Designs的示例: https://codesandbox.io/ s/4xmpr1?file =/demo.js

我尝试使用此属性:

expandable= {{
  expandedRowClassName: (record, index, indent) => {
  ....
  }
}}

但是,只有在使用树数据时,Ant Design似乎并未调用此功能,只有当您设置row> row rowspandable属性为true。但是在树数据的情况下,它们在这个意义上是“可扩展”的,因此它不调用该功能。

有人做过吗?

I'm using Ant Design Table to display tree data. What I need to do is to color each level of indent differently to make it easier to distinguish.

Below is an example of how I'd want to style each row.

- Parent 1 (White)
   - Child 1 (Grey)
   - Child 2 (Grey)
      - Child 1 (Darker grey)
          - Child 1 (Even darker grey)
   - Child 3 (Grey)
       - Child 1 (Darker grey)

- Parent 2 (White)
   - Child 1 (Grey)

Please take a look at Ant Designs' example here: https://codesandbox.io/s/4xmpr1?file=/demo.js

I have tried to use this property:

expandable= {{
  expandedRowClassName: (record, index, indent) => {
  ....
  }
}}

But Ant Design does not seem to call this function when using tree data, only if you have set the rowExpandable property to true. But in the case of tree data they arent 'expandable' in this sense so its not calling the function.

Has anyone done this before?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文