标签：columnsa const 表格 title 嵌套 dataIndex key antd data
使用子表格继续展示父级表格的数据：
、、子级数据
const menu = (
<Menu>
<Menu.Item>Action 1</Menu.Item>
<Menu.Item>Action 2</Menu.Item>
</Menu>
);
const expandedRowRender = (columnsa) => {
console.log(columnsa)
const columns = [
{ title: '路线编号', dataIndex: 'pid', key: 'pid' },
{ title: '开始时间', dataIndex: 'dateBegin', key: 'dateBegin' },
{ title: '结束时间', dataIndex: 'dateEnd', key: 'dateEnd' },
{ title: '线路类型', dataIndex: 'trackType', key: 'trackType' },
{
title: '线路状态',
key: 'state',
render: () => (
<span>
<Badge status="success" />
已规划
</span>
),
},
{ title: '工作次数', dataIndex: 'twNum', key: 'twNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
render: () => (
<Space size="middle">
<Dropdown overlay={menu}>
<a>
More <DownOutlined />
</a>
</Dropdown>
</Space>
),
},
];
const data = [];
data.push(columnsa);
// for (let i = 0; i < 3; ++i) {
// data.push({
// key: i,
// date: '2014-12-24 23:12:00',
// name: 'This is production name',
// upgradeNum: 'Upgraded: 56',
// });
// }
return <Table columns={columns} dataSource={data} pagination={false} />;
};
//父级数据
const columnsa = [
{ title: '任务名称', dataIndex: 'name', key: 'name' },
{ title: '任务编号', dataIndex: 'tid', key: 'tid' },
{ title: '创建时间', dataIndex: 'dateAdd', key: 'dateAdd' },
{ title: '任务级别', dataIndex: 'class', key: 'class' },
{ title: '任务类别', dataIndex: 'tsType', key: 'tsType' },
{ title: '责任人', dataIndex: 'personName', key: 'personName' },
{
title: 'Status',
key: 'state',
render: () => (
<span>
<Badge status="success" />
已完成
</span>
),
},
{ title: '操作', key: 'operation', render: () => <a>领取</a> },
];
表格部分：
<Table
className="taskData"
columns={columnsa}
expandable={{ expandedRowRender }}
dataSource={data}
/>
标签：columnsa,const,表格,title,嵌套,dataIndex,key,antd,data 来源： https://www.cnblogs.com/inkstoneJue/p/15480067.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。