Naive UI 树形选择器：在按钮中使用，点击弹出选择框并获取 ID

<template>
  <div>
    <na-button @click="showTreeSelector">选择</na-button>
    <na-tree-select
      v-model="selectedNodeId"
      :data="treeData"
      :multiple="false"
      :cascade="true"
      :filterable="true"
      :label="node => node.name"
      :children="node => node.children"
      :disabled="node => node.disabled"
      :leaf="node => node.leaf"
      ref="treeSelector"
    ></na-tree-select>
  </div>
</template>
<script>
import { ref } from 'vue';
import { NButton, NTreeSelect } from 'naive-ui';

export default {
  components: {
    NButton,
    NTreeSelect,
  },
  setup() {
    const selectedNodeId = ref(null); // 选中节点的 id

    const treeData = ref([]); // 树形结构数据

    // 后端返回的树形结构数据
    const backendTreeData = [
      {
        id: 1,
        name: '节点1',
        children: [
          {
            id: 2,
            name: '节点1-1',
            children: [
              {
                id: 3,
                name: '节点1-1-1',
              },
              {
                id: 4,
                name: '节点1-1-2',
              },
            ],
          },
          {
            id: 5,
            name: '节点1-2',
          },
        ],
      },
      {
        id: 6,
        name: '节点2',
      },
    ];

    // 将后端返回的数据转换为树形选择器需要的格式
    const convertToTreeData = (data) => {
      return data.map((item) => {
        if (item.children) {
          item.children = convertToTreeData(item.children);
        }
        return item;
      });
    };

    treeData.value = convertToTreeData(backendTreeData);

    const showTreeSelector = () => {
      // 打开树形选择器
      refs.treeSelector.open();
    };

    return {
      selectedNodeId,
      treeData,
      showTreeSelector,
    };
  },
};
</script>
<p>该代码示例展示了如何在按钮中使用 Naive UI 树形选择器，并获取选定节点的 ID。</p>
<ol>
<li>首先，我们使用 <code>&lt;na-button&gt;</code> 组件创建按钮，并添加 <code>@click</code> 事件监听器，调用 <code>showTreeSelector</code> 函数打开树形选择器。</li>
<li>使用 <code>&lt;na-tree-select&gt;</code> 组件渲染树形选择器，并使用 <code>v-model</code> 指令将 <code>selectedNodeId</code> 变量与选择器绑定，实现双向数据绑定。</li>
<li>通过 <code>:data</code> 属性将后端返回的树形结构数据传递给选择器。</li>
<li><code>showTreeSelector</code> 函数使用 <code>refs.treeSelector.open()</code> 打开树形选择器。</li>
</ol>
<p>这样，您就可以在按钮中使用 Naive UI 的树形选择器，点击按钮弹出选择框，并将选择的节点的 ID 传递给父组件了。</p>
<h2>更多功能</h2>
<p>Naive UI 树形选择器还支持其他功能，例如：</p>
<ul>
<li>多选：通过设置 <code>:multiple</code> 属性为 <code>true</code>，可以允许用户选择多个节点。</li>
<li>级联选择：通过设置 <code>:cascade</code> 属性为 <code>true</code>，可以实现级联选择，选择父节点会自动选中子节点。</li>
<li>过滤：通过设置 <code>:filterable</code> 属性为 <code>true</code>，可以实现搜索过滤功能。</li>
</ul>
<h2>文档</h2>
<p>更多关于 Naive UI 树形选择器的文档，请参考：</p>
<p><a href="https://naiveui.com/en-US/docs/component/tree-select">https://naiveui.com/en-US/docs/component/tree-select</a></p>