Ant Design Vue详解a-tree-select使用树形选择器，递归渲染数据，点击选项回显，一二级菜单是否可选等问题

<template>
  <a-tree-select
    v-model="value"
    style="width: 100%"
    :tree-data="treeData"
    tree-checkable
    :show-checked-strategy="SHOW_PARENT"
    placeholder="Please select"
    @change="onChange"
  />
</template>
 
<script>
export default {
  data() {
    return {
      value: [],
      treeData: [], // 初始化树形数据
      SHOW_PARENT = 1, // 定义常量，表示父节点在选中子节点时也被选中
    };
  },
  created() {
    this.fetchData(); // 获取初始化数据
  },
  methods: {
    fetchData() {
      // 模拟异步获取数据
      setTimeout(() => {
        this.treeData = [
          {
            title: 'Node1',
            value: '0-0',
            children: [
              {
                title: 'Child Node1',
                value: '0-0-1',
              },
              {
                title: 'Child Node2',
                value: '0-0-2',
              },
            ],
          },
          {
            title: 'Node2',
            value: '0-1',
          },
        ];
      }, 1000);
    },
    onChange(value) {
      console.log(`selected ${value}`);
    },
  },
};
</script>

这个代码实例展示了如何使用Ant Design Vue中的a-tree-select组件来创建一个树形选择器。它包括了从服务器获取数据，递归渲染树形数据，以及处理选项变化的基本逻辑。在实际应用中，你需要替换fetchData方法以获取实际的树形数据，并处理选中项的逻辑。