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} />
)
}