Vue中使用ztree实现树形结构

* 官网链接 点击这里 <http://www.treejs.cn/v3/api.php>,
*
效果图


*
后端返回数据结构为Object


*
html部分：
<el-form-item label="所属部门：" prop="depname" class="daiSelectUserInp
subordinateDepartments"> <el-input v-model.trim="form.depname" @change=
'onchangeDept' size="small" @focus="showDept" suffix-icon="el-icon-search"> </
el-input> </el-form-item> <div class="aui-dd-parent resize-to-input" v-show=
"isShowDept"> <div class="aui-dropdown aui-dropdown-left"> <div class=
"departTree userTree"> <zTree :zTreeId ="zTreeId" :treeData="zTreeData"
:showOperIcon="showOperIcon" :dataConfig="zTreeDataConfig" :isDrag="zTreeIsDrag"
@clickNode="clickDepartNode"> </zTree> </div> </div> </div>
* 初始化必要数据

* method //搜索所属部门 onchangeDept:function(value){ this.showDept(); }, // 查询部门树
showDept(){var that = this; that.isShowDept =true; var param = {
searchVal:that.form.depname, token:that._logintoken, };
getDepSubTreeList({queryStr:JSON.stringify(param)},that._logintoken).then(
function(res){ console.log("getDepSubTreeList+++++=========",res); if
(res.STATUS="success" && res.RESULT!=null){ that.zTreeData = res.RESULT; }
}).catch(function (err) { }); }, //双击选中节点 clickDepartNode:function (event,
treeId, treeNode, clickFlag) { console.log("treeNode--",treeNode); this
.isShowDept =false; this.form.depid = treeNode.id; this.form.depname =
treeNode.depname; },

• « 上一篇：消费物联网、工业物联网应用场景中的有线、无线连接协议综合分析
• » 下一篇：python爬虫学习（1）