vue使用樹形控件z-tree，動態添加數據，默認展開第一行

環境：vue 2.9.3; webpack;

插件：z-tree,jquery(cnpm install xxxx)

問題;由於數據量比較多，需要動態加載數據，默認第一次請求的數據是最高一級，然后子集都是空。

目標：點擊第一級查詢當前父節點的子集，並展開父節點下面的子節點。

實現方式：el-tree(element-ui里面的樹形控件)、z-tree

el-tree

使用這個方法可以獲取當前點擊節點的數據row，根據row的屬性判斷當前節點是不是父節點，如果是父節點就請求接口，在當前節點push子節點的數據，但是push的時候還是有點蛋疼，直接插入某個位置並不好操作，雖然最后還是實現了（添加的索引位置），但是並不適用，導致第一次點擊父節點並不會直接展開，因為第一次是請求數據，所以不會展開，第二次點擊就會展開，因為數據已經push進去了，但是很顯然不行，很不人性化。

我不知道是我處理的方式不對還是咋的，鑒於時間，我也沒有細致看el-tree的動態加載數據，所以跳過這里。

 

 z-tree

引入z-tree和樣式

import  'ztree'
import 'ztree/css/metroStyle/metroStyle.css'
import $ from 'jquery'

配置信息

shuyusetting:{
          view: {
            showLine: false
          },
          data: {
            simpleData: {
              enable: true
            }
          },
          callback: {
            onClick: this.shuyuOnClick,  //點擊函數
            onExpand: this.shuyuOnExpand, // 展開內容
          }
        },

 

引用z-tree

 <div  style="cursor: pointer;min-height: 200px; max-height:300px; overflow-y: auto" >
       <ul id="shuyuSelect" class="ztree"    style=" width: 230px; height: 30%;overflow:auto;cursor: pointer; " ></ul>  // 注意id，下面需要用到id
   </div>

初始化控件，顯示最頂級數據　　　　　　

var params=new Object();
this.$http.post(this.ip + '/xhhms/rest/interRemoteReportController/v1/getKnowledge', params, { headers: { 'X-AUTH-TOKEN': this.token } }).then((res) => { var data = JSON.parse(res.data); //console.log(data);
            if (!!data&&data.status=="1") { $.fn.zTree.init($("#shuyuSelect"), this.shuyusetting, data.data);　　// 初始化數據 id需要和上面一樣 第二個是配置信息 第三個是頂層的數據
 // console.log(this.knowledgetreedata);
            } else { return false; } }, (err) => { console.log(err); });

接下來是兩個對應配置的函數

     shuyuOnClick(event, treeId, treeNode){
        if(!treeNode.isParent){   // 判斷當前節點不是父級節點 //根據自己的數據來 
          var acknowledgeid = treeNode.id;
          var params= {id:acknowledgeid};
          this.$http.post(this.ip+'/xhhms/rest/interRemoteReportController/v1/getKnowledgeByid', params, {
            headers: {'X-AUTH-TOKEN': localStorage.getItem('token') }
          }).then((res) => {
            var data = JSON.parse(res.data);
            if (!!data&&data.status=="1") {
              //console.log(data.data);
              document.getElementById('edit-iframe').contentWindow.postMessage(JSON.stringify({"DescriptionToReport":data.data.description}),"*");
              document.getElementById('edit-iframe').contentWindow.postMessage(JSON.stringify({"ConclusionToReport":data.data.conclusion}) ,"*");
              this.description = data.data.description;
              this.conclusion = data.data.conclusion;
            } else {
              return false;
            }
          }, (err) => {
                console.log(err);
          });
        }else{
          // 是父級  請求子級增加內容
          this.shuyuOnExpand(event, treeId, treeNode);
        }
      },
      shuyuOnExpand(event, treeId, treeNode){
        console.log("shuyuOnExpand");
          var treeNodeId = treeNode.id;
          if(treeNodeId == 0){
            return;
          }else{
          var params={parentid:treeNodeId};
          this.$http.post(this.ip + '/xhhms/rest/interRemoteReportController/v1/getKnowledge', params, {
            headers: {'X-AUTH-TOKEN': localStorage.getItem('token') }
          }).then((res) => {
            var data = JSON.parse(res.data);
            console.log("data");
            if (!!data&&data.status=="1") {
              var tree = $.fn.zTree.getZTreeObj("shuyuSelect"); //重新渲染
              if (!treeNode.zAsync){
                  tree.addNodes(treeNode, data.data);
                  treeNode.zAsync = true;
              } else{
                  tree.reAsyncChildNodes(treeNode, "refresh");  //刷新內容
              }
            } else {
              return false;
            }
          }, (err) => {
                console.log(err);
          });
          }

      },

這是兩個核心的函數。

 ## 如果需要展開第一行直接在初始化那里修改即可。

$.fn.zTree.init($("#shuyuSelect"), this.shuyusetting, data.data);
var treeObj = $.fn.zTree.getZTreeObj("shuyuSelect");
var nodes = treeObj.getNodes();
treeObj.expandNode(nodes[0]);  // 展開第一行