树搜索

本地搜索

使用 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>