vue树形插件(原创)

所属分类:导航-文件树

 22700  166  查看评论 (8)
分享到微信朋友圈
X
vue树形插件(原创) ie兼容12

更新时间:2020-04-15 09:40:02

安装

npm i vue-search-tree

使用

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

import SearchTree from 'vue-search-tree'
Vue.use(SearchTree)

使用示例请参照Demo演示

属性 (Attributes)

参数说明类型默认值
data源数据Array必填项
node-key节点的唯一标识String'id'
search模糊搜索的关键词String''
empty-text内容为空时展示的文本String''
show-checkbox是否显示checkboxBooleanfalse
default-expand-all是否默认展开所有节点Booleanfalse
expand-on-click-node点击节点时是否展开或折叠Booleantrue
check-on-click-node点击节点时是否选中节点Booleanfalse
default-expanded-keys默认展开节点的keysArray[]
default-checked-keys默认选中节点的keysArray[]
props配置选项,请看下表Object

props (配置项)

参数说明类型
name节点名称String
children节点的子集String

事件 (Event)

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

方法 (Methods)

方法名说明参数参数类型返回值
getNode通过key获取对应节点参数1: 唯一标识keyString / Number成功返回对应的节点, 失败返回null
resetChecked取消所有节点的选中状态---
setCheckedKeys通过keys批量设置节点的选中状态参数1: 唯一标识keys, 参数2: 状态参数1: Array, 参数2: Boolean-
getCheckedKeys获取选中节点的keys--所有选中节点的唯一标识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


相关插件-文件树

VUE中使用树简易版

一个简单灵活的vue.js树形组件,可作为插件使用,也可直接作为component使用 使用时只需传入一个树形数据绑定。 组件还提供了增删改查事件,你可以很方便的在组件上监听。
  文件树
 54879  348

jQuery树型插件dtree(带搜索)

dtree选择部门或者选择部门下人员复选框单选框插件
  文件树
 75917  442

基于bootstraptreeview无限分类树层级联动菜单

基于bootstraptreeview做的一个漂亮的无限分类树层级联动菜单
  文件树
 56204  386

js动态树插件DynamicTree

简单好用的 tree ,纯 js ,可编辑 Tree,并能导出为 html sql php
  文件树
 42321  328

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Boyun888 0
    2021/12/13 19:49:48
    这插件有没有适合uniapp的组件版本 回复
    0
    2021/12/8 17:17:38
    建议再追加当前点击节点的样式效果,现在没法给点击后的节点加样式 回复
    水蜜桃奶芙 0
    2021/7/1 14:57:04
    使用$set在treeList中添加children节点,页面不能显示,请问要怎么修改 回复
    ?浅?色?年?攘?? 0
    2021/4/8 15:48:50
    子节点全选中,会默认选中父节点,怎么取消呢
        ldqjs1
        2021/4/8 16:03:43
        没毛病, 子节点都全选了, 父节点自然也会选择, 你可以在getCheckedNode里面去过滤一下节点
    回复
    fan 0
    2020/5/11 19:51:52

    节点名称不是name   而是a或b 需要如何指定

        fan0
        2020/5/11 19:55:18
        "id": 1000,
        "name": "河南省",

        我的这个名称不是name 而是userName

        "id":1,
        "userName":"yjf"

        那么他这个节点的数据貌似映射不上

        ldqjs1
        2020/5/15 16:49:37
        你加个:props="{name: 'userName'}"属性就可以了
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复