Antdesign-vue Table 树形结构动态获取数据

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、使用步骤
  • 1.核心代码
• 总结

---

前言

在项目中遇到一个需要动态获取表格数据的需求，用户点击下拉按钮。对应的子节点加载相应的数据。

一、使用步骤

1.核心代码

代码如下（示例）：

expandable={{

                defaultExpandedRowKeys: ['1'],

                onExpand: async (record: any, row: any) => {

                  if (!record) return; //判断是否展开

                  if(Object.keys(row.children[0]).length > 0) return //子节点有数据就return，不用重复请求。

                  const newData = [...data];

                  setLoading(true);

                  const res = await https({

                    url:“”,

                    method: 'GET',

                  });

                  const formatMap = (items: any) => {

                    items.find((item: any) => {

                      if (item.key === row.key) {

                        // //找到当前要展开的节点

                        item.children = res.data.data.data.children.map(

                          (el: any) => {

                            const newItem: any = {

                              key: el.facilityId.toString(),

                              areaTwo: el.siteName,

                              equipmenttotal: el.total,

                              netequipmentnum: el.network,

                              insequipmentnum: el.meter,

                              BAequipmentnum: el.ba,

                              type: el.type,

                            };

                            if (newItem.type !== '4') {

                              newItem.children = [{}];

                            }

                            return newItem;

                          }

                        );

                      }

                      if (item.children && item.children.length > 0) {

                       formatMap(item.children);

                      }

                    });

                  };

                  formatMap(newData || []);

                  setData(newData);

                  setLoading(false);

                },

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。