Antd踩坑Table

1. 何时使用

• 当有大量结构化的数据需要展现时；
• 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

2. 可展开table和树型table

//可展开table

//树型table

可展开table以平面的数据为datasource,数据数组的子项不要有嵌套，不要有类似children的的组织结构，在<Table>组件上添加expandable属性就可以自定义要展开显示的内容了

树形组件的dataSource需要保证嵌套数据的属性名一致，可进行多层嵌套，需要注意数据的展示效果

当数据中有 children 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 childrenColumnName 进行配置

const data = [
  {
    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',
              },
            ],
          },
        ],
      },
    ],
  }
];

//嵌套数据

3. table列的两种配置描述，JSX语法糖与column数组 JSX语法ColumnGroup``Column在antd 2.5.0之后引入，使用起来很方便，但是个人有一点见解就是当使用JSX写react页面时不要把太多的功能配置放在JSX代码中。我们在JSX中描述组件的view，在组件体内实现绝大部分的功能操作