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