antd 的 table 嵌套的实现

react 结合 antd 实现 Table 嵌套

表格嵌套样式如下：

表格样式实现的 代码片.

      {
        title: '使用者信息',
        dataIndex: 'user_info',
        key: 'user_info',
        align: 'center',
        width: '69%',
        children: [
          {
            title: '使用者',
            dataIndex: 'user',
            key: 'user',
            align: 'center',
            width: '16%',
            render: (value, row, index) => {
              const obj = {
                children: this.childTable(row, index),
                props: {
                  colSpan: 5,
                },
              }
              return obj
            },
          },
          {
            title: '近期授课时间',
            dataIndex: 'final_time',
            key: 'final_time',
            align: 'center',
            width: '15%',
            render: () => {
              const obj = {
                children: null,
                props: {
                  colSpan: 0,
                },
              }
              return obj
            },
          },
          {
            title: '听课人数',
            dataIndex: 'join_count',
            key: 'join_count',
            align: 'center',
            width: '11%',
            render: () => {
              const obj = {
                children: null,
                props: {
                  colSpan: 0,
                },
              }
              return obj
            },
          },
          {
            title: '讲课次数',
            dataIndex: 'teach_count',
            key: 'teach_count',
            align: 'center',
            width: '10%',
            render: () => {
              const obj = {
                children: null,
                props: {
                  colSpan: 0,
                },
              }
              return obj
            },
          },
          {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align: 'center',
            width: '12%',
            render: () => {
              const obj = {
                children: null,
                props: {
                  colSpan: 0,
                },
              }
              return obj
            },
          },
        ],
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        align: 'center',
        width: '10%',
        render: (text, record, index) => (
          <div style={{padding: 10}}>
            <div style={{marginBottom: 10}}><Button type="primary" size="small" style={{width: 90}}>添加使用者</Button></div>
            <div style={{marginBottom: 10}}><Button type="primary" size="small" style={{width: 90}}>查看</Button></div>
            <div style={{marginBottom: 10}}><Button type="primary" size="small" style={{width: 90}}>编辑</Button></div>
            <div><Popconfirm title="确定删除吗？"
              <Button type="danger" size="small" style={{width: 90}}>删除</Button>
            </Popconfirm></div>
          </div>
        ),
      },

childTable = (row, parthtIndex) => {
    const data = row.users
    const cloumns = [
      {
        title: '使用者',
        dataIndex: 'user',
        key: 'user',
        align: 'center',
        width: '16%',
        render: (text, record) => (
          <div style={{textAlign: 'left', padding: 10}}>
            <p><b>昵称：</b>{record.user_name}</p>
            <p><b>ID：</b>{record.user_id}</p>
          </div>
        ),
      },
      {
        title: '近期授课时间',
        dataIndex: 'final_time',
        key: 'final_time',
        align: 'center',
        width: '15%',
      },
      {
        title: '听课人数',
        dataIndex: 'join_count',
        key: 'join_count',
        align: 'center',
        width: '11%',
      },
      {
        title: '讲课次数',
        dataIndex: 'teach_count',
        key: 'teach_count',
        align: 'center',
        width: '10%',
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        align: 'center',
        width: '12%',
        render: (text, record, index) => (
          <div style={{padding: 10}}>
            <Button style={{marginRight: 5}} size="small" type="primary">查看</Button>
            <Popconfirm title="确定删除吗？"><Button size="small" type="danger">删除</Button></Popconfirm>
          </div>
        ),
      },
    ]
    return(
      <Table bordered columns={cloumns} dataSource={data} showHeader={false} rowKey={record => record.user_id} pagination={false} />
    )
  }