Ant Design:树形表格

简介: Ant Design:树形表格

Table组件表格支持树形数据的展示,当行数据拥有children字段时会自动展示为树形表格。


  • 在数据列表项中添加children数组,该数组为该行数据的子项。例如:
const list = [
  {
    key: 1,
    name: 'John Brown sr.',
    age: 60,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: 11,
        name: 'John Brown',
        age: 42,
        address: 'New York No. 2 Lake Park',
      },
      {
        key: 12,
        name: 'John Brown jr.',
        age: 30,
        address: 'New York No. 3 Lake Park',
        children: [
          {
            key: 121,
            name: 'Jimmy Brown',
            age: 16,
            address: 'New York No. 3 Lake Park',
          },
        ],
      },
      {
        key: 13,
        name: 'Jim Green sr.',
        age: 72,
        address: 'London No. 1 Lake Park',
        children: [
          {
            key: 131,
            name: 'Jim Green',
            age: 42,
            address: 'London No. 2 Lake Park',
            children: [
              {
                key: 1311,
                name: 'Jim Green jr.',
                age: 25,
                address: 'London No. 3 Lake Park',
              },
              {
                key: 1312,
                name: 'Jimmy Green sr.',
                age: 18,
                address: 'London No. 4 Lake Park',
              },
            ],
          },
        ],
      },
    ],
  },
]

相关文章
antd-procomponent中编辑表格动态数据设置的使用
antd-procomponent中编辑表格动态数据设置的使用
510 0
|
前端开发 C#
WPF MVVM中在ViewModel中关闭或者打开Window
原文:WPF MVVM中在ViewModel中关闭或者打开Window 这篇博客将介绍在MVVM模式ViewModel中关闭和打开View的方法。 1. ViewModel中关闭View public class MainViewModel { publi...
3676 0
|
缓存 Linux 开发工具
CentOS 7- 配置阿里镜像源
阿里镜像官方地址http://mirrors.aliyun.com/ 1、点击官方提供的相应系统的帮助 :2、查看不同版本的系统操作: 下载源1、安装wget yum install -y wget2、下载CentOS 7的repo文件wget -O /etc/yum.
255403 0
|
缓存 资源调度 Rust
前端效率提升实践之路
在一个B端前端项目中,开发团队面临开发效率低、交付质量和可维护性差的问题。为了解决这些问题,他们以“提效”为主题,展开了项目治理。首先,他们优化了发布和编译过程,通过更换包管理工具、减少不必要的包、使用缓存策略等方法,显著缩短了发布和编译时间。其次,团队致力于沉淀可复用物料,创建了高度配置化的组件,通过VSCode插件助手自动化配置,提高了代码复用性和开发效率。此外,他们还改进了研发流程,制定了前端、后端和产品的规范,以减少沟通成本和提高接口质量。通过这些措施,团队成功提升了开发效率,并降低了代码维护成本。
415 3
前端效率提升实践之路
|
NoSQL 前端开发 Redis
Windows 下安装和配置 Redis (图文教程)
Windows 下安装和配置 Redis (图文教程)
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
|
Java 编译器 Spring
面试突击78:@Autowired 和 @Resource 有什么区别?
面试突击78:@Autowired 和 @Resource 有什么区别?
15111 5
|
人工智能 安全 搜索推荐
AI代码生成器——CodeWhisperer
【2月更文挑战第16天】AI代码生成器——CodeWhisperer
444 2
AI代码生成器——CodeWhisperer
|
SQL Java 关系型数据库
【MyBatis-Plus】快速精通Mybatis-plus框架—核心功能
【MyBatis-Plus】快速精通Mybatis-plus框架—核心功能
1008 0
【MyBatis-Plus】快速精通Mybatis-plus框架—核心功能
|
前端开发
在history模式中push和replace有什么区别
在history模式中push和replace有什么区别