Vue中使用ztree实现树形结构
官网链接点击这里,效果图后端返回数据结构为Objecthtml部分:<el-form-item label="所属部门:" prop="depname"class="daiSelectUserInp subordinateDepartments">
·
- 官网链接 点击这里,
效果图
后端返回数据结构为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;
},
更多推荐
已为社区贡献27条内容
所有评论(0)