這篇文章給大家分享的是關於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
<p 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 </p>
初始化控件,顯示最頂級資料 var params= new Object();
<em><span style="color: #0000ff"></span>this.$http.post(this.ip + '/xhhms/rest/interRemoteReportController/v1/getKnowledge', params, {<br/> headers: {<br/> 'X-AUTH-TOKEN': this.token<br/> }<br/> }).then((res) => {<br/> var data = JSON.parse(res.data);<br/> //console.log(data);<br/> if (!!data&&data.status=="1") {<br/> $.fn.zTree.init($("#shuyuSelect"), this.shuyusetting, data.data); // 初始化数据 id需要和上面一样 第二个是配置信息 第三个是顶层的数据<br/><br/> // console.log(this.knowledgetreedata);<br/> } else {<br/> return false;<br/> }<br/> }, (err) => {<br/> console.log(err);<br/> });<span style="color: #000000"><br/></span></em>
#接下來是兩個對應配置的函數
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); }); } },
這是兩個核心的函數。
相關推薦:
#Vue中class與style綁定以及條件與列表渲染的分析
以上是vue如何利用樹狀控制項z-tree動態新增數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!