vue3+tdesign的tree树实现点击树的父节点或子节点，可以获取其value值

Vue 3 结合 TDesign 组件库实现 Tree 组件的点击事件并获取节点的 value 值，可以按照以下步骤进行：

1. 引入 TDesign 的 Tree 组件及其相关依赖，并确保已经在项目中安装了 `@tdesign/vue-next`。

2. 在 Vue 组件中定义数据结构，通常是一个对象数组，每个对象都包含 `value`、`label` 等字段，其中 `children` 字段可以用来表示子节点。

3. 在模板中使用 TDesign 的 `<t-tree>` 组件，并通过 `v-model` 绑定数据源。

4. 通过 `@select` 事件监听器来捕获节点的选中事件。当点击树节点时，该事件会被触发，事件处理函数会接收到一个事件对象，其中包含了被点击节点的信息。

5. 在事件处理函数中，你可以通过事件对象的 `node` 属性访问到节点的具体信息，包括 `value` 值。

下面是一个简单的示例代码：

<template>
  <t-tree
    :data-source="treeData"
    @select="handleSelect"
  ></t-tree>
</template>

<script>
import { ref } from 'vue';
import { TTree } from '@tdesign/vue-next';

export default {
  components: {
    TTree,
  },
  setup() {
    const treeData = ref([
      {
        value: '1',
        label: '父节点1',
        children: [
          { value: '1-1', label: '子节点1-1' },
          { value: '1-2', label: '子节点1-2' },
        ],
      },
      {
        value: '2',
        label: '父节点2',
        children: [
          { value: '2-1' },
          { value: '2-2', label: '子节点2-2' },
        ],
      },
    ]);

    const handleSelect = (event) => {
      const { node } = event;
      console.log('选中节点的 value 值：', node.value);
    };

    return {
      treeData,
      handleSelect,
    };
  },
};
</script>

在这个示例中，我们定义了一个名为 `treeData` 的响应式数据源，它包含了树形结构的节点信息。我们还在 `<t-tree>` 组件上绑定了 `select` 事件，并定义了一个 `handleSelect` 函数来处理这个事件。当点击任何一个树节点时，`handleSelect` 函数会被触发，并打印出被点击节点的 `value` 值。