vue横向树结构_Vue中使用ztree实现树形结构

Vue中使用ztree实现树形结构

发布时间：2018-08-30 14:25,

浏览次数：1272

, 标签：

Vue

ztree

* 官网链接 点击这里 ,

*

效果图

*

后端返回数据结构为Object

*

html部分：

'onchangeDept' size="small" @focus="showDept" suffix-icon="el-icon-search">

el-input>

"isShowDept">

"departTree userTree">

:showOperIcon="showOperIcon" :dataConfig="zTreeDataConfig" :isDrag="zTreeIsDrag"

@clickNode="clickDepartNode">

* 初始化必要数据

* 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; },