SearchTree 搜索树

基于 ElTree 封装，集成搜索过滤功能，支持单选和多选。

基础用法

<template>
  <div>
    <p>单选: {{ modelValue1 }}</p>
    <MSearchTree
      v-model="modelValue1"
      height="250px"
      :data="data"
      @node-click="nodeClick"
    >
    </MSearchTree>

    <p>多选: {{ modelValue2 }}</p>
    <MSearchTree
      v-model="modelValue2"
      height="250px"
      :data="data"
      show-checkbox
      @node-click="nodeClick"
    >
      <template #footer> footer插槽 </template>
    </MSearchTree>

    <MMarkdownView :value="readme"></MMarkdownView>
  </div>
</template>

<script setup lang="ts">
import readme from '@/components/searchTree/README.md?raw'
import { ref } from 'vue'

const modelValue1 = ref(4)
const modelValue2 = ref([4])

const data = ref([
  {
    id: 1,
    name: 'Level one 1',
    children: [
      {
        id: 4,
        name: 'Level two 1-1',
        children: [
          {
            id: 5,
            name: 'Level two 1-1-1'
          }
        ]
      },
      {
        id: 6,
        name: 'Level two 1-2',
        children: [
          {
            id: 7,
            name: 'Level two 1-2-1'
          }
        ]
      }
    ]
  },
  {
    id: 8,
    name: 'Level one 2'
  }
])

const nodeClick = (node: any) => {
  console.log(node)
}
</script>

<style lang="scss" scoped></style>

API

SearchTree 属性

属性名	说明	类型	默认值
modelValue	v-model，show-checkbox 时为勾选的节点，否则为选中的节点	any | any[]	—
show-checkbox	节点是否可被选择	boolean	false
data	展示数据	array	[]
fields	数据字段映射	SearchTreeFields	{}
height	整体高度	string	'600px'

$attrs

SearchTree 的 $attrs 会透传给 ElTree 组件。

SearchTreeFields

属性名	说明	类型	默认值
value	唯一值字段名	string	'id'
label	标签字段名	string	'name'
children	子节点字段名	string	'children'

SearchTree 插槽

插槽名	说明
footer	自定义底部按钮