vue-magic-tree

牛顿曾言：我之所以这么成功，是因为我站在巨人的肩膀上！

• 本项目建立在 vue-giant-tree 和 ztree ，产出了可以自定义iconfont图标和海量数据渲染的vue-magic-tree!

• 在本项目中的components中就是vue-magic-tree组件，目前没有发布到npm，如需使用单独提出即可。

疑问

有任何问题，直接留下issue。

掘金

Element、Iview、Ztree性能对比专栏

测试地址

线上测试地址：测试

使用方法

引入vue-magic-tree

yarn add vue-magic-tree

props配置

配置一下settings对象, 传入nodes数组

<vue-magic-tree
  :setting="setting"
  :nodes="nodes"
  @onClick="onClick"
  @onCheck="onCheck"
  @onCreated="handleCreated"
/>

除了我自定义的图标功能

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

事件配置

onAsyncError: (...arg) => {
  this.$emit('onAsyncError', ...arg)
},
onAsyncSuccess: (...arg) => {
  this.$emit('onAsyncSuccess', ...arg)
},
onCheck: (...arg) => {
  this.$emit('onCheck', ...arg)
},
onClick: (...arg) => {
  this.$emit('onClick', ...arg)
},
onCollapse: (...arg) => {
  this.$emit('onCollapse', ...arg)
},
onDblClick: (...arg) => {
  this.$emit('onDblClick', ...arg)
},
onDrag: (...arg) => {
  this.$emit('onDrag', ...arg)
},
onDragMove: (...arg) => {
  this.$emit('onDragMove', ...arg)
},
onDrop: (...arg) => {
  this.$emit('onDrop', ...arg)
},
onExpand: (...arg) => {
  this.$emit('onExpand', ...arg)
},
onMouseDown: (...arg) => {
  this.$emit('onMouseDown', ...arg)
},
onMouseUp: (...arg) => {
  this.$emit('onMouseUp', ...arg)
},
onRemove: (...arg) => {
  this.$emit('onRemove', ...arg)
},
onRename: (...arg) => {
  this.$emit('onRename', ...arg)
},
onRightClick: (...arg) => {
  this.$emit('onRightClick', ...arg)
}

如上emit出去的事件就是本组件支持的事件了，至于ztree中更多的事件我觉得你可能用不上。

更详细的内容，移步至ztree官网