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',
              },
            ],
          },
        ],
      },
    ],
  },
]

相关文章
|
前端开发
修改Ant Design 按钮的样式
修改Ant Design 按钮的样式
529 0
|
JavaScript
Ant Design vue 表格内换行
Ant Design vue 表格内换行
319 1
|
8月前
|
API
Ant Design(antd)的JSX风格表格的一些使用
Ant Design(antd)的JSX风格表格的一些使用
246 0
|
8月前
Ant Design组件动态嵌套表单制作
Ant Design组件动态嵌套表单制作
245 0
|
前端开发
ant design锚点组件
ant design锚点组件
95 0
|
数据格式
hook项目实例之原始数据形成ant design table表格
hook项目实例之原始数据形成ant design table表格
48 0
|
数据处理 数据格式
hook项目实例之原始数据形成ant design table表格 2
hook项目实例之原始数据形成ant design table表格
74 0
|
前端开发 数据格式
再次接触老朋友react+ant design table合并单元格
再次接触老朋友react+ant design table合并单元格
160 0
Ant Design:表格如何使用?
Ant Design:表格如何使用?
109 0
|
索引
Ant Design:表格自定义渲染
Ant Design:表格自定义渲染
229 0

热门文章

最新文章