嵌套表格笔记

嵌套表格
https://www.freesion.com/article/75101498284/

https://www.cnblogs.com/fengxiana/p/13812598.html

https://blog.csdn.net/renlimin1/article/details/126747588

https://www.cnblogs.com/fengxiana/p/13812598.html  ---重要 子表格嵌套
https://codeleading.com/article/40465658763/

https://codeleading.com/article/40465658763/




<Table
     
        columns={columns}
        expandable={{ expandedRowRender , 
            rowExpandable: record => record.flag != '0',
            onExpandedRowsChange
         }} // 渲染子表格的回调
         expandedRowKeys={expandedRowKeys}
         rowKey={record=>record.key}
        dataSource={tableData} 
        scroll={{ x: 1200}}
        pagination={false} 
        bordered
        onExpand={openClick} // 展开时触发的回调
        className="parent-table"
      />




   const [expandedRowKeys,setExpandedRowKeys] = useState<any>([''])
   
    const [icon,setIcon] = useState<any>('')
    const [openRowKeys ,setopenRowKeys] =useState<any>([])
    const [data, setData] = useState<any>(a)
    const [ParentData, setParentData] = useState<any>([
        { name: 'fuji1', age: 15, address: 'zs', key: 5 , Cid:"1", flag:'1',isOpen:false},
        { name: 'fuji2', age: 18, address: 'zs2', key: 1 , Cid:"2",flag:'1',isOpen:false},
        { name: 'fuji3', age: 19, address: 'zs3', key: 2 , Cid:"3",flag:'1',isOpen:false},
        { name: 'fuji4', age: 25, address: 'zs4', key: 3 , Cid:"4",flag:'1',isOpen:false},
        { name: 'fuji5', age: 35, address: 'zs5', key: 4 , Cid:"",flag:'0',isOpen:false},
    ])


 const ChildrenDataOne = [
            {
                "2023-01": "54.59",
                "2023-02": "54.59",
                "2023-03": "54.59",
                "2023-04": "54.47",
                "2023-05": "68.77",
                "2023-Q1": "163.77",
                "2023-Q2": "123.24",
                "project_name": "绩效",
                "key": 100000,
                "total": "287.01",
                "2022-07": "0.00",
                "2022-08": "0.00",
                "2022-09": "0.00",
                "2022-10": "0.00",
                "2022-11": "0.00",
                "2022-12": "0.00",
                "2023-06": "0.00",
                "2022-Q3": "0.00",
                "2022-Q4": "0.00"
            },
            {
                "2023-06": "138.06",
                "2023-Q2": "138.06",
                "project_name": "出差",
                "key": 100001,
                "total": "138.06",
                "2022-07": "0.00",
                "2022-08": "0.00",
                "2022-09": "0.00",
                "2022-10": "0.00",
                "2022-11": "0.00",
                "2022-12": "0.00",
                "2023-01": "0.00",
                "2023-02": "0.00",
                "2023-03": "0.00",
                "2023-04": "0.00",
                "2023-05": "0.00",
                "2022-Q3": "0.00",
                "2022-Q4": "0.00",
                "2023-Q1": "0.00"
            },
            {
                "2023-06": "35.22",
                "2023-Q2": "35.22",
                "project_name": "薪酬",
                "key": 100002,
                "total": "35.22",
                "2022-07": "0.00",
                "2022-08": "0.00",
                "2022-09": "0.00",
                "2022-10": "0.00",
                "2022-11": "0.00",
                "2022-12": "0.00",
                "2023-01": "0.00",
                "2023-02": "0.00",
                "2023-03": "0.00",
                "2023-04": "0.00",
                "2023-05": "0.00",
                "2022-Q3": "0.00",
                "2022-Q4": "0.00",
                "2023-Q1": "0.00"
            }
        ]


const [ParentColumns, setParentColumns] = useState<any>([
        {
            "title": "名称1",
            "dataIndex": "name",
            "key": "name",
            "width": 100,
            "className": "recount",
            render: (text, record) => (
                <span>
                 
                   <span onClick={(e) => openTable(e, record)} style={{ marginRight: 8 }}>
                    {record.Cid =='' ? <span>不能展开</span>:   (record.isOpen ? <Button>收起</Button> : <Button>展开</Button>)}
                    </span>
                  {text}
                </span>
              ),
         
        },]