vue中使用vue-giant-tree

1.安装 vue-giant-tree

npm i vue-giant-tree --save

 

2.在需要ztree树的页面引入

import tree from "vue-giant-tree";

 

3.注册ztree

components: {

　　tree

},

 

4.在data中配置ztree 

                //ztree数据
                treeDatas: [],
                //ztree对象
                ztreeObj: null,
                //ztree配置，参照ztree官网的配置
                setting: {
                    check: {
                        //树是否带复选框或者单选框
                        enable: true
                    },
                    data: {
                        simpleData: {
                            //是否使用简单数据模式
                            enable: true,
                            //树节点id，一般是后台数据库主键
                            idKey: "id",
                            //父级id
                            pIdKey: "pid",
                            rootPId: "0"
                        }
                    },
                    //ztree回调函数
                    callback: {
                        //树选择事件
                        onCheck: this.ztreeOnCheck
                    }
                },            

setting配置说明:

　　ztreeObj:当前树对象，树创建成功后返回

　　check.enabe : 树是否显示 复选框或单选按钮

　　simpleData.enable: 是否使用简单数据模式

　　　　如果设置为 true，必须设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。

callback:回调函数

onCheck：树选中时回调，用于获取选中的节点数据

ztreeOnCheck() {
          let checked = this.ztreeObj.getCheckedNodes(true);
          console.log(checked);
   },

 

5.使用ztree：

<tree
                    :setting="setting"
                    :nodes="treeDatas"
                    @onCheck="ztreeOnCheck"
                    @onCreated="handleCreated"
            />

 

说明: nodes 树展示数据列表

setting：树的配置，参照ztree树官方网站 http://www.treejs.cn/v3/api.php

@onCheck 用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数

ztreeOnCheck() {
          let checked = this.ztreeObj.getCheckedNodes(true);
          console.log(checked);
   },

@onCreated 树创建时回调函数

handleCreated(ztreeObj) {
                console.log("加载树完成");
                this.ztreeObj = ztreeObj;
                console.log(this.ztreeObj);
                // let firstTree = ztreeObj.getNodes()[0];
                // 默认选中第一个
                // ztreeObj.selectNode(firstTree);
                // 设置节点全部展开
                ztreeObj.expandAll(true);
                //加载完自动点击第一个，加载右边表格
                // this.setting.callback.onClick(null, firstTree.id, firstTree)

            },