antv中的TreeSelect连级选择问题

antv中的TreeSelect连级选择问题

需求效果

所有代码：

<template>
  <a-tree-select
    show-search
    style="width: 100%"
    :tree-data="treeData"
    :labelInValue = 'true'    // 重要
    v-model="value"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    allow-clear
    multiple
    tree-default-expand-all
    @change="onChange"
  />
</template>

<script>
const treeData = [
  {
    title: "Node1",
    value: "0-0",
    key: "0-0",
    children: [
      {
        title: "Child Node1",
        value: "0-0-0",
        key: "0-0-0",
        children: [
          {
            title: "Child Node1-1",
            value: "0-0-0-0",
            key: "0-0-0-0",
          },
        ],
      },
    ],
  },
  {
    title: "Node2",
    value: "0-1",
    key: "0-1",
    children: [
      {
        title: "Child Node3",
        value: "0-1-0",
        key: "0-1-0",
        disabled: true,
      },
      {
        title: "Child Node4",
        value: "0-1-1",
        key: "0-1-1",
      },
      {
        title: "Child Node5",
        value: "0-1-2",
        key: "0-1-2",
      },
    ],
  },
];
export default {
  data() {
    return {
      value: [],
      treeData,
    };
  },
  methods: {
    // 选中树节点时调用此函数
    onChange(value) {
      value.forEach((item) => {
        item.label = this.getTreePath(this.treeData, (v) => v.value === item.value);
      });
    },
    //获取树形数据的某个元素的所有父节点
    getTreePath(tree, func, path = []) {
      if (!tree) return [];
      for (const i of tree) {
        // 注意：title根据项目数据变化
        path.push(i.title);
        if (func(i)) return this.formatPath(path);
        if (i.children) {
          const findChildren = this.getTreePath(i.children, func, path);
          if (findChildren.length) return findChildren;
        }
        path.pop();
      }
      return [];
    },
    // 将上面父子级数组转换成 label/label/label格式
    formatPath(path) {
      let str = "";
      path.forEach((item) => {
        item = item.trim();
        str = str + item + "/";
      });
      return str.slice(0, str.length - 1);
    }
  },
};
</script>

参考文档

vue中使用js获取树形数据的所有父节点
js 树形结构数据 已知某一子节点 一次向上获取所有父节点