vue-ztree

Vue小伙伴交流群: 590688906

vue-ztree-2.0 版本地址

vue-ztree 演示预览地址

vue-ztree-2 演示预览地址

通过以下demo来实现

app.vue代码如下

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <div style='width:280px;' v-if='ztreeDataSource.length>0'>
      <vue-ztree :list.sync='ztreeDataSource' :func='nodeClick' :expand='expandClick' :contextmenu='contextmenuClick' :is-open='true'></vue-ztree>
    </div>
  </div>
</template>

<script>
import vueZtree from './component/vue-ztree.vue'
export default {
  data () {
    return {
      msg: 'Hello Vue-Ztree!',
      ztreeDataSource:[{
                id:1,
                name:"音乐",
                children:[]
      },{
          id:2,
          name:"视频",
          children:[{
             id:3,
             name:"电影",
             children:[{
                id:4,
                name:"国产电影"
             },{
                id:5,
                name:"好莱坞电影"
             },{
                id:6,
                name:"小语种电影"
             }]
          },{
             id:7,
             name:"短片",
             children:[{
                id:9,
                name:"电视剧"
             },{
                id:10,
                name:"短片"
             }]
          }]
      }]
    }
  },
  methods:{
    // 点击节点
    nodeClick:function(m){
       console.log(JSON.parse(JSON.stringify(m)));
    },
    // 右击事件
    contextmenuClick:function(){
       console.log("触发了自定义的contextmenuClick事件");
    },
    // 点击展开收起
    expandClick:function(m){
       console.log(JSON.parse(JSON.stringify(m)));
       // 点击异步加载
       if(m.isExpand) {
          // 动态加载子节点, 模拟ajax请求数据
         // 请注意 id 不能重复哦。
         if(m.hasOwnProperty("children")){
            
            m.loadNode = 1; // 正在加载节点

            setTimeout(()=>{

              m.loadNode = 2; // 节点加载完毕

              m.isFolder = !m.isFolder; 

              var node = JSON.parse(JSON.stringify(m));

             // 动态加载子节点, 模拟ajax请求数据
             // 请注意 id 不能重复哦。
             if(node.hasOwnProperty("children")){
                  node.children.push({
                      id:+new Date(),
                      name:"动态加载节点1",
                      path:"",
                      clickNode:false,
                      isFolder:false,
                      isExpand:false,
                      loadNode:0,
                      children:[{
                            id:+new Date()+1,
                            name:"动态加载末节点",
                            path:"",
                            clickNode:false,
                            isFolder:false,
                            isExpand:false,
                            loadNode:0
                      }]
                  });
                  
                  m.children = node.children;
             }

            },1000)
            
         }
       }
    }
  },
  components:{
    vueZtree
  }
}
</script>

<style>
body {font-family: Helvetica, sans-serif;}
</style>

###vue-ztree/初始化参数

参数	类型	默认值	描述
list	Array	-	树的结构数据源
func	Function	-	点击节点事件
contextmenu	Function	-	右击节点事件
expand	Function	-	点击展开/收起的方法（一般在异步加载的时候使用, 非异步加载传null）
is-open	Bealoon	true	是否展开树

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.