ant design vue2中selectTree

### Ant Design Vue 2 中 SelectTree 组件的使用方法

#### 安装依赖
为了在项目中使用 `SelectTree` 组件，需先安装 Ant Design Vue：

npm install ant-design-vue@2.x --save

#### 基本引入方式
全局注册组件以便于在整个应用中使用。

import { TreeSelect } from 'ant-design-vue';
app.use(TreeSelect);

局部按需加载则更为灵活高效。

import { defineComponent } from 'vue';
export default defineComponent({
  components: {
    ATreeSelect: resolve => require(['ant-design-vue/lib/tree-select'], resolve),
  },
});

#### HTML模板结构
定义树形下拉选择器的基础布局。

<a-tree-select
  style="width: 100%"
  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  placeholder="Please select"
  allow-clear
>
</a-tree-select>

#### 数据绑定与事件处理
设置默认展开节点、已选项以及监听变化事件等属性配置。

<template>
  <div id="components-tree-select-demo-multiple">
    <a-space direction="vertical" style="width: 100%">
      <a-tree-select
        show-search
        style="width: 100%"
        :value="value"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="treeData"
        placeholder="Please select"
        tree-default-expand-all
        @change="onChange"
      />
    </a-space>
  </div>
</template>

<script>
const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-0',
      },
    ],
  },
];

export default {
  data() {
    return {
      value: undefined,
      treeData,
    };
  },
  methods: {
    onChange(value) {
      console.log('changed:', value);
    },
  },
};
</script>

上述代码展示了如何创建一个多级联的选择控件，并通过双向数据绑定来管理状态更新[^1]。