/vue-search-tree

一个基于vue的树形控件, 模糊搜索功能可抗住4000+的全展开节点, 支持scopedSlots作用域插槽

Primary LanguageVue

安装

npm i vue-search-tree


Demo演示

https://buuing.github.io/vue-search-tree/


使用

方式1: 通过 script 标签引入 (适用于前后不分离项目)

在dist目录下找到一个css和一个js文件, 然后在页面上假如如下两行代码

其中js文件记得要放在引入vue的script后面

<link rel="stylesheet" href="./dist/search-tree@2.2.3.css">
...
<script src="./dist/search-tree@2.2.3.min.js"></script>

方式2: 通过 import 方式引入

先找到main.js引入插件并use

import SearchTree from 'vue-search-tree'

Vue.use(SearchTree)

使用示例请参照Demo演示


属性 (Attributes)

参数 说明 类型 默认值
data 源数据 Array 必填项
node-key 节点的唯一标识 String 'id'
theme-color 主题色 String '#409eff'
search 模糊搜索的关键词 String ''
hide-misses 是否隐藏模糊搜索不匹配的节点 Boolean true
expand-misses 是否展开模糊搜索不匹配的节点 Boolean false
search-debounce 模糊搜索防抖 (毫秒) Number 300
empty-text 内容为空时展示的文本 String ''
show-checkbox 是否显示checkbox Boolean false
default-expand-all 是否默认展开所有节点 Boolean false
expand-on-click-node 点击节点时是否展开或折叠 Boolean true
check-on-click-node 点击节点时是否选中节点 Boolean false
default-expanded-keys 默认展开节点的keys Array []
default-checked-keys 默认选中节点的keys Array []
filter-node 过滤显示的节点 (该方法得到的是引用节点) Function -
props 配置选项,请看下表 Object

props (配置项)

参数 说明 类型
name 节点名称 String
children 节点的子集 String
disabled 该节点是否禁用 String

事件 (Event)

事件名 说明 参数
node-click 节点被点击时触发 参数1: 事件参数event, 参数2: 当前node节点
node-checked 节点的选中状态改变时触发 参数1: 事件参数event, 参数2: 当前node节点
node-expand 节点展开或折叠时触发 参数1: 事件参数event, 参数2: 当前node节点

方法 (Methods)

方法名 说明 参数 参数类型 返回值
getNodeByKey 通过key获取对应节点 参数1: 唯一标识key String / Number 成功返回对应的节点, 失败返回null
resetChecked 取消所有节点的选中状态 - - -
setCheckedByKeys 通过keys批量设置节点的选中状态 参数1: 唯一标识keys, 参数2: 状态 参数1: Array, 参数2: Boolean -
getCheckedKeys 获取选中节点的keys 参数1: 指定表示(默认为nodeKey) String 所有选中节点的唯一标识keys
getCheckedNodes 获取选中的节点nodes - - 所有选中的节点nodes
remove 通过key删除一个节点 参数1: 唯一标识key或当前节点 String / Number 成功返回true, 失败返回false
append 通过key添加一个子节点 参数1: 唯一标识key或当前节点, 参数2: node节点 String / Number 成功返回true, 失败返回false
insertBefore 通过key在前添加一个兄弟节点 参数1: 唯一标识key或当前节点, 参数2: node节点 String / Number 成功返回true, 失败返回false
insertAfter 通过key在后添加一个兄弟节点 参数1: 唯一标识key或当前节点, 参数2: node节点 String / Number 成功返回true, 失败返回false
getTotalOfNodes 获取所有满足条件的节点数量 - Function 所有满足条件的节点数量
  • getTotalOfNodes 使用示例:

    • 获取所有名称包含'北京'的节点: getTotalOfNodes(node => node.name.indexOf('北京') > -1)