antd表格点击展开树形结构

    //转换成树形结构 直接返回所有数据转换
    const setTreeData = (source: any) => {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
      return cloneData.filter((father: any) => { // 循环所有项,并添加children属性
        let branchArr = cloneData.filter((child: any) => father.areaCode == child
          .parentCode); // 返回每一项的子级数组
        // console.log(branchArr)
        branchArr.length > 0 ? father.children = branchArr : ""; //给父级添加一个children属性,并赋值
        return father.parentCode == "-2"; //返回第一层
      });
    };
    // 获取数据 点击一次加载一次
    const getRegion = async (code:any=-3,row?: any) => {
      let res = await $axios.get($api.getAreaList+'/'+code, {
      });
      if (res.data.success == true) {
        // page.total = res.data.totalCount;
        if (res.data.data.length > 0) {
          const tbData: any = [];
          res.data.data.forEach((item: any, index: number) => {
            if (!item.leaf) {
              item["children"] = [];
            }
            tbData.push(item);
          });
          if (row) {
            row.children = tbData;
          } else {
            data.value = tbData;
          }
        } else {
          $message.warning("没数据");
        }
      } else {
        $message.warning("失败");
      }
    };

    // 递归时存放父类名称
    const parentName = ref({});
    // 递归获取父类
    const getParentName = (node: any, targetId: number) => {
      if (node.id  == targetId) {
        parentName.value = node;
      } else if (node.children && node.children.length) {
        node.children.forEach((it: any) => {
          getParentName(it, targetId);
        });
      }
    };
    //获取分类
    // const getClassification = (id: string | number, row?: any) => {
    //   $axios
    //     .get($api.getBusinessClass, {
    //       params: { parentId: id },
    //       showLoading: false,
    //     })
    //     .then((res: any) => {
    //
    //     });
    // };
    // 获取兄弟分类初始化
    const siblingCategoryArr = ref([] as string[]);
    const getSiblingCategory = (filterArr: any, parentId: number) => {
      filterArr.forEach((item: any, index: string) => {
        if (item.parentId == parentId) {
          siblingCategoryArr.value.push(item.id);
        } else {
          if (item.children && item.children.length) {
            getSiblingCategory(item.children, parentId);
          }
        }
      });
    };

    // 获取展开行分类初始化
    const expandedRowKeys = ref([] as any);
    //展开行获取子分类操作
    const expandNode = (expanded: boolean, row: any) => {
      if (expanded) {
        // console.log(row,'++++++');return

        getRegion(row.areaCode, row);
        expandedRowKeys.value.push(row.id);
        // 获取兄弟元素
        siblingCategoryArr.value.splice(0, siblingCategoryArr.value.length);
        getSiblingCategory(data.value, row.parent);

        // 兄弟元素排除自己
        const siblingArr = siblingCategoryArr.value.filter((it, i) => {
          return it != expandedRowKeys.value[expandedRowKeys.value.length - 1];
        });
        // 获取兄弟元素的子元素
        childArr.value.splice(0, childArr.value.length);
        siblingArr.forEach((item, index) => {
          getChildrenItem(data.value, item);
        });
        const filterArr = siblingArr.concat(childArr.value);

        // 对expandedRowKeys 进行操作(兄弟元素不能存在,兄弟元素的子元素也不能存在)
        expandedRowKeys.value = expandedRowKeys.value.filter(
          (it: any, i: number) => {
            return !filterArr.includes(it);
          }
        );
      } else {
        // 收拢
        expandedRowKeys.value.forEach((it: any, i: number) => {
          if (it == row.id) {
            expandedRowKeys.value.splice(i, 1);
          }
        });
      }
    };

    // 从所有表格中找到需要去筛选子元素的元素
    const getChildrenItem = (itemArr: any, parentId: string) => {
      itemArr.forEach((item: any, index: number) => {
        if (item["id"] == parentId) {
          getAllChildren(item);
        } else {
          if (item["children"] && item["children"].length) {
            getChildrenItem(item["children"], parentId);
          }
        }
      });
    };
    // 此方法与以上方法类似,此方法用于刷新子元素
    const refreshChildren = (filterArr: any, parent: string) => {
      filterArr.forEach((item: any, index: number) => {
        if (item["id"] == parent) {
          $axios
            .get($api.getClassification, {
              params: { parentId: item.id },
              showLoading: false,
            })
            .then((res: any) => {
              if (res.status == 200) {
                item.children = res.data.data;
                // 获取父元素
                // 判断父元素是否还存在子元素
                if (
                  !parentName.value["children"] ||
                  !parentName.value["children"].length
                ) {
                  if (expandedRowKeys.value) {
                    expandedRowKeys.value = expandedRowKeys.value.filter(
                      (it: any) => {
                        return it != parentName.value["id"];
                      }
                    );
                    delete parentName.value["children"];
                  }
                }
              }
            });
        } else {
          if (item["children"] && item["children"].length) {
            refreshChildren(item["children"], parent);
          }
        }
      });
    };
    let childArr = ref([] as string[]);
    // 找到之后,进行获取所有子元素
    const getAllChildren = (parentItem: any) => {
      childArr.value.push(parentItem["gbpsPrdCategoryId"]);
      if (parentItem["children"] && parentItem["children"].length) {
        parentItem["children"].forEach((it: any) => {
          getAllChildren(it);
        });
      }
    };

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值