vue-magic-tree
牛顿曾言:我之所以这么成功,是因为我站在巨人的肩膀上!
-
本项目建立在 vue-giant-tree 和 ztree ,产出了可以自定义iconfont图标和海量数据渲染的vue-magic-tree!
-
在本项目中的components中就是vue-magic-tree组件,目前没有发布到npm,如需使用单独提出即可。
疑问
有任何问题,直接留下issue。
掘金
测试地址
线上测试地址:测试
使用方法
引入vue-magic-tree
yarn add vue-magic-tree
props配置
配置一下settings对象, 传入nodes数组
除了我自定义的图标功能
setting: data: // 设置图标库(采用iconfont class形式) iconMap: 0: 'iconjianyuede' 1: 'icon-xuexiaodanwei' 2: 'iconhuiyuan' // 设置对应每个节点的节点类型,与数据中customType属性对应 key: nodeType: 'customType' view: // 开启图标显示功能 showIcon: true nodes = id: 1 pid: 0 name: "随意勾选 1" open: true customType: 0 chkDisabled: true
如上配置,就可以使用iconfont图标库功能,当你的程序运行时,我会找到nodeType为customType
的属性,也就是上面那条数据中的customType
属性,拿到它的值为0,然后去iconMap中匹配,将匹配的结果渲染成图标。
没错,流程就是这么简单。
其余所有配置都基于ztree,所以推荐看ztree官网
event
事件配置
{ this} { this} { this} { this} { this} { this} { this} { this} { this} { this} { this} { this} { this} { this} { this}
如上emit出去的事件就是本组件支持的事件了,至于ztree中更多的事件我觉得你可能用不上。
更详细的内容,移步至ztree官网