vue使用树形控件z

环境：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

// 注意id，下面需要用到id

初始化控件，显示最顶级数据　　　　　　

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]); // 展开第一行