树搜索

本地搜索

使用 VTreeSearch 组件可实现树搜索功能

在 Playground 打开示例

查看代码

<template>  <VTreeSearch v-model="checked" :data="data" checkable :expandOnFilter="false" /> </template>  <script setup lang="ts"> import { ref } from 'vue' import { VTreeSearch } from '@wsfe/vue-tree'  const checked = ref()  const data = ref([  {  title: 'node-1',  id: 'node-1',  children: [  {  title: 'node-1-1',  id: 'node-1-1',  children: [  {  title: 'node-1-1-1',  id: 'node-1-1-1',  },  {  title: 'node-1-1-2',  id: 'node-1-1-2',  },  {  title: 'node-1-1-3',  id: 'node-1-1-3',  },  ],  },  {  title: 'node-1-2',  id: 'node-1-2',  children: [  {  title: 'node-1-2-1',  id: 'node-1-2-1',  },  {  title: 'node-1-2-2',  id: 'node-1-2-2',  },  ],  },  {  title: 'node-1-3',  id: 'node-1-3',  children: [  {  title: 'node-1-3-1',  id: 'node-1-3-1',  },  {  title: 'node-1-3-2',  id: 'node-1-3-2',  },  ],  },  ],  },  {  title: 'node-2',  id: 'node-2',  children: [  {  title: 'node-2-1',  id: 'node-2-1',  children: [  {  title: 'node-2-1-1',  id: 'node-2-1-1',  },  {  title: 'node-2-1-2',  id: 'node-2-1-2',  },  ],  },  ],  }, ]) </script>

远程搜索

启用 searchRemote 并配合 load 方法，可实现远程搜索

在 Playground 打开示例

查看代码

<template>  <VTreeSearch  v-model="checked"  checkable  :expandOnFilter="false"  searchRemote  :load="load"  @search="handleSearch"  /> </template>  <script setup lang="ts"> import { ref } from 'vue' import { VTreeSearch } from '@wsfe/vue-tree'  const checked = ref() const searchKeyword = ref('')  const handleSearch = (keyword) => {  searchKeyword.value = keyword }  const load = (node, resolve) => {  setTimeout(() => {  if (searchKeyword.value) {  resolve([  { title: 'search-1', id: 'search-1', isLeaf: true },  { title: 'search-2', id: 'search-2', isLeaf: true },  ])  } else {  resolve([  { title: 'node-1', id: 'node-1', isLeaf: true },  { title: 'node-2', id: 'node-2', isLeaf: true },  ])  }  }, 1000) } </script>

操作插槽

使用 actions 插槽可定制功能按钮

在 Playground 打开示例

查看代码

<template>  <VTreeSearch ref="treeSearch" v-model="checked" :data="data" checkable :expandOnFilter="false">  <template #actions>  <span  :style="{  marginLeft: '8px',  cursor: 'pointer',  }"  @click="handleExpand"  >Expand All</span>  </template>  </VTreeSearch> </template>  <script setup lang="ts"> import { ref } from 'vue' import { VTreeSearch } from '@wsfe/vue-tree'  const treeSearch = ref<InstanceType<typeof VTreeSearch> | null>(null) const checked = ref()  const handleExpand = () => {  treeSearch.value?.setExpandAll(true) }  const data = ref([  {  title: 'node-1',  id: 'node-1',  children: [  {  title: 'node-1-1',  id: 'node-1-1',  children: [  {  title: 'node-1-1-1',  id: 'node-1-1-1',  },  {  title: 'node-1-1-2',  id: 'node-1-1-2',  },  {  title: 'node-1-1-3',  id: 'node-1-1-3',  },  ],  },  {  title: 'node-1-2',  id: 'node-1-2',  children: [  {  title: 'node-1-2-1',  id: 'node-1-2-1',  },  {  title: 'node-1-2-2',  id: 'node-1-2-2',  },  ],  },  {  title: 'node-1-3',  id: 'node-1-3',  children: [  {  title: 'node-1-3-1',  id: 'node-1-3-1',  },  {  title: 'node-1-3-2',  id: 'node-1-3-2',  },  ],  },  ],  },  {  title: 'node-2',  id: 'node-2',  children: [  {  title: 'node-2-1',  id: 'node-2-1',  children: [  {  title: 'node-2-1-1',  id: 'node-2-1-1',  },  {  title: 'node-2-1-2',  id: 'node-2-1-2',  },  ],  },  ],  }, ]) </script>