vue-ztree-component

vue-ztree-component

一个不依赖ztree的vue ztree插件

项目中需要使用到和ztree一样效果的树状图组件，考虑引入jQuery和ztree过于庞大，得不偿失，简单封装一个基于vue的ztree组件。后期会考虑加入更多可配置性功能。

Build Setup

# install dependencies
npm install vue-ztree-component -S

# use
main.js
import ZtreeComponent from 'vue-ztree-component' 
Vue.use(ZtreeComponent)

everyone.vue
import ZtreeComponent from 'vue-ztree-component' 
components:{
    ZtreeComponent
}

<ztree-component  :nodes="list"  @handle="handle" ></ztree-component>

• nodes接受一个数组，数组格式如下 id name为必传项
• @handle接受一个函数，点击节点时触发，默认参数为当前点击节点的信息（对象）demo地址

list = [{
  id: "1",
  name: "父节点1",
  childArr: [{
    id: "1-1",
    name: "子节点1-1",
    childArr: [
      {
        id: "1-1-1",
        name: "子节点1-1-1"
      }, {
        id: "1-1-2",
        name: "子节点1-1-2"
      }, {
        id: "1-1-3",
        name: "子节点1-1-3"
      }
    ]
  },
  {
    id: "1-2",
    name: "子节点1-2"
  }, {
    id: "1-3",
    name: "子节点1-3"
  }]
},{
  id: "1",
  name:'父节点2-无子元素'  
}]