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)

            },