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得到显示的值{哈哈。尴尬了}