Vue Treeselect 下拉树状结构选择并展示

转发某位大牛的链接 https://blog.youkuaiyun.com/Dream_xun/article/details/83116804
分享：我在请求后台返回的数据的时候，自己利用递归遍历封装了方法把后台请求的数据转换成插件需要的数据格式
这里转换的是对象数组形式

一、后台返回的对象数组需要自己封装

//封装方法
function buildTree(data){
      //构建tree的根节点 即超级管理员
       var tree = new Object();
       parseTree(data, tree);
       var list  = new Array();
       list.push(tree);
       return list;
  }
 function parseTree(data, tree) {
      tree.label = data.RoleName;
      tree.id = data.ID;
      //构建子节点
      var subTree = data.listManagerRole;
      if(!subTree || subTree.length === 0) {
          return tree;
      } else {
        var children = new Array();
        for(var i = 0, len = subTree.length;i < len; i++) {
           var child = new Object();
           child = parseTree(subTree[i], child)
           children.push(child)
        }
          tree.children = children;
          return tree;
       }
  }

二、后台返回了规定的数据格式、选择的时候需要给后台传入id和label

 <!---禁止选中父节点 :disable-branch-nodes="true":->
 <treeselect  @select="selectDept" @deselect="removeDept" :disable-branch-nodes="true" v-model="station" placeholder="请选择上刊部门" :multiple="true" :options="options" />
 <script>
    export default{
       data(){
           options:[],
           station:null,
           selectLabel:[]
       },
       metgods:{
     	  selectDept(val){
                this.selectLabel.push({deptId:val.id,deptName:val.label})
            },
            removeDept(val){
                for (let i = 0;i<this.selectLabel.length;i++){
                    if(val.label == this.selectLabel[i]){
                       this.selectLabel.splice(i,1);
                    }
                }
            },
       }
    }
 </script>

注意：在使用的使用会出现的错误，绑定的默认值不能是空字符串或数字否则会出现（unknow)，只能绑定初始化为null的变量才可以，根据后台返回的值默认选中直接绑定后台返回的value值即可