Ant Design Vue中TreeSelect详解

<template>
  <a-tree-select
    v-model:value="value"
    style="width: 320px"
    :tree-data="treeData"
    allow-clear
    @select="selectHnader"
    search-placeholder="Please select"
  />
</template>
<script lang="ts">
import { TreeSelect } from 'ant-design-vue';
import { defineComponent,ref,toRefs,watch } from 'vue';

const treeData = [
  {
    title: '部门0-0',value: '0-0',key: '0-0',children: [
      {
        title: '部门0-0-0',value: '0-0-0',key: '0-0-0',},],{
    title: '部门0-1',value: '0-1',key: '0-1',children: [
      {
        title: '部门0-1-0',value: '0-1-0',key: '0-1-0',disabled: true,// 该值不能够选中
      },{
        title: '教育局',value: '0-1-1',key: '0-1-1',]
export default defineComponent({
  setup() {
    //   那么它将选中部门 部门0-0-0；
    // 通过value值显示对应的title值
    const value = ref(['0-0-0']);

    // 监听，但是可能不需要
    watch(value,() => {
      console.log(value.value);
    });

    function selectHnader(value:any,node:any,extray:any){
        console.log("==>value",value); //获取的是数据源中的value值
        console.log("==>node",toRefs(node) ); // 该选中节点的属性
        console.log("==>extray",extray.selectedNodes[0].props.title); //得到显示的值
    }
    return {
      value,treeData,selectHnader
    };
  },});
</script>

使用select事件

select 事件 被选中时调用 
function(value,node,extra)
我使用 select事件主要是得到选中的显示值
最初我还想通过递归根据id得到显示的值{哈哈。尴尬了}