vue3 typescript navie ui 构建treeselect 待搜索框

在Vue 3 和 TypeScript 中使用 Naive UI 构建 Treeselect（基于树的选择控件）并且添加待搜索框，你可以按照以下步骤操作：

1. 安装依赖：
首先确保已经安装了 Vue、Naive UI 的 TypeScript 版本和 Vue Router（如果需要路由功能）。

npm install vue@next vue-router naive-ui @naiveui/vue @types/vuex @types/react-dom @types/node

2. 创建项目结构：
创建一个名为`components`的文件夹，分别存放`Treeselect.vue`（选择组件）、`SearchBox.vue`（搜索框组件）和`App.vue`（主入口）。

3. 导航组件 (`Treeselect.vue`)：

<template>
  <n-tree-select v-model="selectedValue" :data="options" @input="handleSelectChange">
    <!-- 树节点配置 -->
  </n-tree-select>
</template>

<script lang="ts">
import { defineComponent, Prop, Ref } from "vue";
import { NTreeSelect } from "@naiveui/vue";

interface Option {
  value: string;
  label: string;
  children?: Array<Option>;
}

export default defineComponent({
  components: {
    NTreeSelect,
  },
  props: {
    selectedValue: {
      type: String,
      default: "",
    },
    options: {
      type: Array as unknown as Array<Option>,
      required: true,
    },
  },
  methods: {
    handleSelectChange(value: string | null) {
      this.$emit("input", value);
    },
  },
});
</script>

4. 搜索框组件 (`SearchBox.vue"):

<template>
  <div class="search-box">
    <input
      ref="searchInput"
      type="text"
      v-model="searchQuery"
      @keyup.enter="search"
    />
    <button @click="search">搜索</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, Ref } from "vue";

export default defineComponent({
  props: {
    searchQuery: {
      type: String,
      default: "",
    },
  },
  methods: {
    search() {
      const filteredOptions = this.options.filter((option) =>
        option.label.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
      // 更新 Treeselect 的选项数据
      this.$parent.options = filteredOptions;
    },
  },
});
</script>

5. 主入口 (`App.vue"):

<template>
  <div>
    <SearchBox v-model="searchQuery" :options="filteredOptions"/>
    <Treeselect v-model="selectedValue" :options="filteredOptions" />
  </div>
</template>

<script lang="ts">
import { reactive } from "vue";
import SearchBox from "@/components/SearchBox.vue";
import Treeselect from "@/components/Treeselect.vue";

export default {
  components: {
    SearchBox,
    Treeselect,
  },
  setup() {
    const searchQuery = reactive("");
    const filteredOptions = reactive([]); // 初始空数组

    // 赋值给 Treeselect 组件
    const options = () => {
      return someInitialOptions; // 获取初始数据源
    };

    // 当搜索查询改变时，更新过滤后的选项
    watch(searchQuery, (newQuery) => {
      filteredOptions.value = options().filter((option) =>
        option.label.toLowerCase().includes(newQuery.toLowerCase())
      );
    });

    // 监听 Treeselect 的变化事件
    watch(() => {
      return Treeselect.selectedValue;
    }, (newValue) => {
      // 更新全局 selectedValue
    });

    return { searchQuery, filteredOptions };
  },
};
</script>

在这个例子中，`Treeselect` 组件通过 `v-model` 绑定搜索结果，`SearchBox` 控制输入框的搜索功能，并将搜索结果传递给 `Treeselect`。