react antdesign 嵌套表格笔记

 const [columns, setColumns] = useState<any>(
   {
                "title": "名称",
                "dataIndex": "project_name",
                "key": "name",
                "width": 180,
                "fixed": "left",
                "className": "recount",
                render: (text, record) => (
                    <span>
                      {text}
                       <span onClick={(e) => chageTable(e, record)} style={{ marginRight: 8 }}>
                       
                       {record.isOpen=='false' ? <Button>关闭</Button> :<Button>展开/Button>}
                        </span>
                     
                    </span>
                  ),
            },
   )         
 // 点击展开按钮
        const openTable=(e,record)=>{
            // console.log(record)
            if (record.isOpen == false) {
                // 点击展开
                setopenRowKeys(record.key); // 点击的每一行的key的值保存下来。
                setIcon(record.key)
       
                setParentData((ParentData:any)=>{
                    return ParentData.map((item: any) => {
                        if (item.key == record.key) {
                            return { ...item, isOpen: !item.isOpen };
                        }else {
                            return { ...item, isOpen: false };
                        }
                        return item;
                    });
                })
                setExpandedRowKeys([record.key])
        　　 // 判断 如果子表格收起时 直接退出当前函数，不进行请求存储
            if (record.Cid == 1) {
                setData({ ...data, [record.Cid]: ChildrenDataOne })
            }
            if (record.Cid == 2) {
                setData({ ...data, [record.Cid]: ChildrenDataTwo })
            }
            if (record.Cid == 3) {
                setData({ ...data, [record.Cid]: ChildrenDataThree })
            }
            if (record.Cid == 4) {
                setData({ ...data, [record.Cid]: ChildrenDataFour })
            }
            } else if (record.isOpen== true) {
                // 再次点击的时候从数组删除上次存入的key值。
                setopenRowKeys( openRowKeys.splice(openRowKeys.indexOf(record.key), 1))
             

                setParentData((ParentData:any)=>{
                    return ParentData.map((item: any) => {
                        if (item.key == record.key) {
                            return { ...item, isOpen: !item.isOpen };
                        }else {
                            return { ...item, isOpen: false };
                        }
                        return item;
                    });
                })
                setParentData(ParentData)
                setExpandedRowKeys([])
                setIcon('')
         }     
        }

antd中嵌套表格，子表格数据相同的问题解决（hook写法）

www.cnblogs.com/fengxiana/p… 参考这篇文章。如 子集数据

注意： 有一些问题。如果子集和父表格。内容数据相同。 首先无法隐藏子级的表头。第二个问题。 子集的表头无法根据父级的flexed定位的宽度展示。 就像被挤压了一样。 如果子表格 表头 少于 父表格表头。且数据不等。 效果应该如官网一样