vue 使用ztree

1 全局引入jquery , 不明白的看我上一个的随笔 , 特别简单

2 我没有封装组件 , 项目里面这个效果的只用了一次 , 没有必要

在你的<script>标签下面引入这俩东西 , 前提你要保证你node_models 文件夹里面已经install这个了 , package.json文件里面也有这个依赖
import "ztree/css/zTreeStyle/zTreeStyle.css"

import "ztree/js/jquery.ztree.all"

3 引入这两个文件以后就可以正常使用了 , 只是使用方法不能像写jquery那样的了

接下来基本按照ztree的示例来写就没问题

data(){

  return {

        zNodes:[

        { id:, pId:, name:"普通的父节点", t:"我很普通，随便点我吧", open:true},

        { id:, pId:, name:"叶子节点 - 1", t:"我很普通，随便点我吧"},

        { id:, pId:, name:"叶子节点 - 2", t:"我很普通，随便点我吧"},

        { id:, pId:, name:"叶子节点 - 3", t:"我很普通，随便点我吧"},

        { id:, pId:, name:"NB的父节点", t:"点我可以，但是不能点我的子节点，有本事点一个你试试看？", open:true},

        { id:, pId:, name:"叶子节点2 - 1", t:"你哪个单位的？敢随便点我？小心点儿..", click:false},

        { id:, pId:, name:"叶子节点2 - 2", t:"我有老爸罩着呢，点击我的小心点儿..", click:false},

        { id:, pId:, name:"叶子节点2 - 3", t:"好歹我也是个领导，别普通群众就来点击我..", click:false},

        { id:, pId:, name:"郁闷的父节点", t:"别点我，我好害怕...我的子节点随便点吧...", open:true, click:false },

        { id:, pId:, name:"叶子节点3 - 1", t:"唉，随便点我吧"},

        { id:, pId:, name:"叶子节点3 - 2", t:"唉，随便点我吧"},

        { id:, pId:, name:"叶子节点3 - 3", t:"唉，随便点我吧"}

      ],

      setting:{

              data: {

          key: {

            title:"t",

            name:'deptName',

          },

          simpleData: {

            enable: true

          }

        },

        callback: {

          // beforeClick: this.beforeClick,

          // onClick: this.onClick

          onRightClick: this.OnRightClick

        }

      },

    }

}

然后

methods: {

    OnRightClick(a,b,c){

      console.log(a)

      console.log(b)

      console.log(c)

    },

    ztreeInit(){

      $.fn.zTree.init($("#treeDemo"), this.setting, this.treeList);

    }

  },

  mounted() {
　　this.ztreeInit(); 

}

这样效果就出来了

基本上其他多余的代码基本上就不贴了 , 然后就是右击写业务上的需求了 , 大体就这么个意思

巴特西

vue 使用ztree

最新文章

热门文章