vue3 ant desgin 的树形组件，获取父节点，子节点数据

根据树形图当前节点获取子节点、父节点的层级关系，仅一次学习记录，如果有问题欢迎指正，同时有好的方法也可以让我学习下

父节点：

 function getFatherName(data) {
        if (!data) return '';
        fatherStr = fatherStr + ',' + data.node.title;
        getFatherName(data.parent);
        return fatherStr;
      }

子节点：

 function getChildName(node, title) {
        if (node.children && node.children.length > 0) {
          node.children.forEach((item) => {
            childStr = title + item.title;
            if (item.children && item.children.length > 0) {
              getChildName(item, childStr);
            }

            if (!item.children) {
              // 已经是最里面的节点了
              childsList.push(childStr);
            }
          });
        } else {
          childsList.push(title);
        }

        return childsList;
      }

完整代码：

<template>
  <a-tree
    v-model:expandedKeys="expandedKeys"
    v-model:selectedKeys="selectedKeys"
    v-model:checkedKeys="checkedKeys"
    checkable
    :tree-data="treeData"
    @check="handleTreeCheck"
  >
    <template #title="{ title, key }">
      <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
      <template v-else>{{ title }}</template>
    </template>
  </a-tree>
</template>
<script lang="ts">
import type { TreeProps } from 'ant-design-vue';
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  setup() {
    const expandedKeys = ref<string[]>(['0-0-0']);
    const selectedKeys = ref<string[]>([]);
    const checkedKeys = ref<string[]>([]);
    // watch(expandedKeys, () => {
    //   console.log('expandedKeys', expandedKeys);
    // });
    // watch(selectedKeys, () => {
    //   console.log('selectedKeys', selectedKeys);
    // });
    // watch(checkedKeys, () => {
    //   console.log('checkedKeys', checkedKeys);
    // });

    const getFloors = (root, onePathDeep = 1, deepArr = []) => {
      for (let i = 0; i < root.length; i++) {
        if (root[i] == null) return 0;
        if (!root[i].children?.length) {
          deepArr.push(onePathDeep);
        } else {
          onePathDeep++;
          getFloors(root[i].children, onePathDeep, deepArr);
        }
      }
      return Math.max(...deepArr);
    };

    const treeData = [
      {
        title: '华东站',
        key: '0-0',
        children: [
          {
            title: '江苏站',
            key: '0-0-0',
            children: [
              {
                title: '南京站',
                key: '0-0-0-0',
                isLeaf: false,
                children: [{ title: '高淳站', key: '0-0-0-0-0', isLeaf: true }],
              },
              { title: '连云港站', key: '0-0-0-1', isLeaf: true },
              { title: '淮安站', key: '0-0-0-2', isLeaf: true },
            ],
            isLeaf: false,
          },
          {
            title: '上海站',
            key: '0-0-1',
            children: [
              { title: '上1站', key: '0-0-1-0', isLeaf: true },
              { title: '上2站', key: '0-0-1-1', isLeaf: true },
              { title: '上3站', key: '0-0-1-2', isLeaf: true },
            ],
            isLeaf: false,
          },
          {
            title: '浙江站',
            key: '0-0-2',
            isLeaf: true,
          },
        ],
        isLeaf: false,
      },
      {
        title: '0-1',
        key: '0-1',
        children: [
          { title: '0-1-0-0', key: '0-1-0-0', isLeaf: true },
          { title: '0-1-0-1', key: '0-1-0-1', isLeaf: true },
          { title: '0-1-0-2', key: '0-1-0-2', isLeaf: true },
        ],
        isLeaf: false,
      },
      {
        title: '0-2',
        key: '0-2',
        isLeaf: true,
      },
      {
        title: '0-3',
        key: '0-3',
        isLeaf: true,
      },
    ];
    // 计算方法
    const getLevel = (arr) => {
      let maxLevel = 0;
      (function callBack(arr, level) {
        ++level;
        maxLevel = Math.max(level, maxLevel);
        for (let i = 0; i < arr.length; i++) {
          let item = arr[i];
          if (item.children && item.children.length > 0) {
            callBack(item.children, level);
          } else {
            delete item.children;
          }
        }
      })(arr, 0);
      return maxLevel;
    };

    const handleTreeCheck = (
      checkedKeys,
      { checked, checkedNodes, node, event },
    ) => {
      let childStr = '';
      let childsList = [];

      let tableArr = [];

      let fatherStr = '';

      let fatherName = getFatherName(node.parent);

      //   console.log('当前节点下的子节点有哪些', getChildName(node, node.title));
      //   console.log('获取树节点最里面的节点', getInsideChild(node.children));
      //   console.log('获取当前节点的父级节点名', getFatherName(node.parent));

      const newArr = getChildName(node, node.title).map((ele) => {
        return fatherName + ele;
      });

      console.log('父级--子级--节点关系的整合', newArr);

      function getChildName(node, title) {
        if (node.children && node.children.length > 0) {
          node.children.forEach((item) => {
            childStr = title + ',' + item.title;
            if (item.children && item.children.length > 0) {
              getChildName(item, childStr);
            }

            if (!item.children) {
              // 已经是最里面的节点了
              childsList.push(childStr);
            }
          });
        } else {
          childsList.push(title);
        }

        return childsList;
      }

      function getInsideChild(data) {
        data &&
          data.forEach((item) => {
            if (item.isLeaf) return tableArr.push(item);
            if (item.children && item.children.length > 0) {
              getInsideChild(item.children);
            }
          });
        return tableArr;
      }

      function getFatherName(data) {
        if (!data) return '';
        fatherStr = data.node.title + ',' + fatherStr;
        getFatherName(data.parent);
        return fatherStr;
      }
    };

    console.log('treeData最大层级：', getLevel(treeData));

    return {
      treeData,
      expandedKeys,
      selectedKeys,
      checkedKeys,
      handleTreeCheck,
    };
  },
});
</script>

效果图：