Vue中使用ztree实现树形结构

• 官网链接 点击这里,

• 效果图
  

• 后端返回数据结构为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;
     },