vue+element UI 当前节点的向上所有父节点全部勾选，向下的所有子节点不进行勾选，并在文本框进行展示勾选内容，勾选时并隐藏下拉框

项目当中的需求实现自定义勾选树，当选择子节点的时候，当前节点的向上所有父节点全部勾选，向下的所有子节点不进行勾选，并在文本框进行展示勾选内容，勾选时并隐藏下拉框，鼠标放置文本框，出现清除按钮，点击清楚文本并重置树，并且需要记录当前勾选的标识，名称等节点信息。后端返回的树节点信息，到底有几层未知，数据量到底有多大未知。
项目环境：vue+element UI 树（el-tree）

<el-form
    class="sarch_container mt30"
    label-width="70px"
    label-position="left"
    :model="formLabelAlign"
    @submit.native.prevent
>
	<el-form-item label="上级标签：" class="sarch_form_item">
	     <el-select v-model="formLabelAlign.parentTag" placeholder="请选择上级标签" ref="sarchTree" clearable @change="sarchTagChange()">
	         <el-option class="select_tree_item" :value="prevTagArr">
	             <el-tree
	                 :data="prevTagArr"
	                 show-checkbox
	                 ref="tagTree"
	                 node-key="code"
	                 check-strictly
	                 @check="checktagTreeNode"
	             >
	             </el-tree>
	         </el-option>
	     </el-select>
	</el-form-item>
</el-form>

data

prevTagArr:[{"code":"0jdGu33w","label":"data","pcode":"0","children":[]},{"code":"1212DWE","label":"home","pcode":"0","children":[{"code":"12345678","label":"tmp","pcode":"1212DWE","children":[{"code":"2BkCxUst","label":"room","pcode":"12345678","children":[{"code":"3FDZUkFF","label":"ui","pcode":"2BkCxUst","children":[{"code":"4J6rg1Wi","label":"ombs","pcode":"3FDZUkFF","children":[{"code":"4WlSEliD","label":"zip","pcode":"4J6rg1Wi","children":[]},{"code":"5dLPYAKR","label":"jar_11","pcode":"4J6rg1Wi","children":[]},{"code":"66666666","label":"jdk","pcode":"4J6rg1Wi","children":[]}]}]}]},{"code":"2tmt60KC","label":"啥","pcode":"12345678","children":[{"code":"jiUUyeVB","label":"滴滴222","pcode":"2tmt60KC","children":[]}]},{"code":"o9kZORnc","label":"321122","pcode":"12345678","children":[]}]},{"code":"opt9nnvx","label":"000","pcode":"1212DWE","children":[{"code":"rxVDK1bS","label":"啥也不是2456","pcode":"opt9nnvx","children":[]}]}]},{"code":"7Y837XwW","label":"lrzsz","pcode":"0","children":[{"code":"7YFmAEua","label":"xuyue","pcode":"7Y837XwW","children":[{"code":"v86YirXW","label":"666","pcode":"7YFmAEua","children":[]}]},{"code":"88888877","label":"util","pcode":"7Y837XwW","children":[]},{"code":"88888888","label":"mysql","pcode":"7Y837XwW","children":[]},{"code":"f25CZrGh","label":"112","pcode":"7Y837XwW","children":[]},{"code":"icvHZwu9","label":"3","pcode":"7Y837XwW","children":[]}]},{"code":"97m0mjdG","label":"Memory","pcode":"0","children":[{"code":"5pwzFNMJ","label":"滴滴2","pcode":"97m0mjdG","children":[]},{"code":"ALCGyCwE","label":"zookeeper","pcode":"97m0mjdG","children":[]},{"code":"CbdHmPvZ","label":"zookeeper_1","pcode":"97m0mjdG","children":[]},{"code":"EQvYrT5Q","label":"zookeeper-2","pcode":"97m0mjdG","children":[]}]},{"code":"FEC4qQso","label":"kafka","pcode":"0","children":[{"code":"FEDGTDD","label":"kafka_1.1.0","pcode":"FEC4qQso","children":[]},{"code":"FkWmcd76","label":"kafka_1.2.0","pcode":"FEC4qQso","children":[]},{"code":"FpaIACtO","label":"kafka_1.3.0","pcode":"FEC4qQso","children":[]},{"code":"H35AhEz5","label":"kafka_1.4.0","pcode":"FEC4qQso","children":[]}]},{"code":"HFvnIoYW","label":"reids","pcode":"0","children":[{"code":"HYGYK12","label":"bin","pcode":"HFvnIoYW","children":[]},{"code":"Iq0k9j3x","label":"config","pcode":"HFvnIoYW","children":[]},{"code":"Iw4W08Vo","label":"redis-1","pcode":"HFvnIoYW","children":[]},{"code":"JUHUG12","label":"redis-2","pcode":"HFvnIoYW","children":[]}]},{"code":"JuqP37K6","label":"tmp","pcode":"0","children":[{"code":"KIUJYHYG","label":"ombs","pcode":"JuqP37K6","children":[]},{"code":"KRm2ikmG","label":"优化新增","pcode":"JuqP37K6","children":[]},{"code":"L5N1rj6B","label":"other1","pcode":"JuqP37K6","children":[]},{"code":"LVSFUYC1","label":"other2","pcode":"JuqP37K6","children":[]},{"code":"M1X8WsAn","label":"other3","pcode":"JuqP37K6","children":[]}]},{"code":"MyF62Y7t","label":"abc","pcode":"0","children":[{"code":"N9DV6UTq","label":"1","pcode":"MyF62Y7t","children":[]},{"code":"PEOl1tIn","label":"2","pcode":"MyF62Y7t","children":[]},{"code":"PtaCsEts","label":"3","pcode":"MyF62Y7t","children":[]},{"code":"S059eM3E","label":"4","pcode":"MyF62Y7t","children":[]}]},{"code":"Sc667jBt","label":"eer","pcode":"0","children":[{"code":"T46Vbb92","label":"ety","pcode":"Sc667jBt","children":[]},{"code":"Uq85P8Rx","label":"etc","pcode":"Sc667jBt","children":[]},{"code":"Vg6CZSHX","label":"etx","pcode":"Sc667jBt","children":[{"code":"VxAzp1sZ","label":"etx-1","pcode":"Vg6CZSHX","children":[]},{"code":"W91vdDph","label":"etx-2","pcode":"Vg6CZSHX","children":[]}]}]},{"code":"UXNBbWlO","label":"b","pcode":"0","children":[]},{"code":"YGYFJUJJ","label":"ux","pcode":"0","children":[{"code":"YRHHTFS","label":"uxl","pcode":"YGYFJUJJ","children":[]},{"code":"aHNFpT6b","label":"uxp","pcode":"YGYFJUJJ","children":[]},{"code":"acg9RvHM","label":"uxe","pcode":"YGYFJUJJ","children":[]},{"code":"bYVpAJFU","label":"uxa","pcode":"YGYFJUJJ","children":[]},{"code":"dUdlXsni","label":"uxgd","pcode":"YGYFJUJJ","children":[]},{"code":"kjELWFVz","label":"uxmm","pcode":"YGYFJUJJ","children":[{"code":"mWcbjjUr","label":"uxmmr","pcode":"kjELWFVz","children":[]},{"code":"o6FcMyct","label":"uien","pcode":"kjELWFVz","children":[]},{"code":"oBtgdEau","label":"uieef","pcode":"kjELWFVz","children":[]}]}]},{"code":"mlS85xh6","label":"uie","pcode":"0","children":[]},{"code":"oMt8FkPv","label":"puyo","pcode":"0","children":[{"code":"r9GmZUn9","label":"pugf","pcode":"oMt8FkPv","children":[]},{"code":"v0qvhQW2","label":"punu","pcode":"oMt8FkPv","children":[]},{"code":"wu2UeRMf","label":"puer","pcode":"oMt8FkPv","children":[]},{"code":"xKilTar4","label":"pugh","pcode":"oMt8FkPv","children":[]}]}],
formLabelAlign: {
    parentTagCode:'',
    parentTag: "",
    tagName: ""
},
prevCheckNode:[],//存储树节点
prevCheckName:[],//存储树名称
checkedKeys:[],//暂存选择的树节点
checkTreeName:[],//暂存选择的树名称
tpArr:''

methods

checktagTreeNode: function (a, b) {
   const _self=this
   var resArr=[];//所有的code label 集成数组
   _self.getTagMap(_self.prevTagArr,resArr);
   //初始化各数据开始
   _self.checkedKeys=[]
   _self.checkTreeName=[]
   _self.formLabelAlign.parentTag=''
   _self.formLabelAlign.parentTagCode=''
   //初始化各数据结束
   // debugger
   if(_self.prevCheckNode.length){//判断是否是选择过树之后的点击
       let booFlag=true//判断是否是第二次点击取消选择标记
       _self.prevCheckNode.forEach(ele => {//遍历存储的树节点
           if(ele === a.code){//判断节点相同说明是第一个父节点
               _self.$nextTick(() => {
                   _self.$refs.tagTree.setCheckedKeys([]);//树选择滞空
               });
               _self.prevCheckNode=[]//节点存储滞空
               _self.prevCheckName=[]//节点名称存储滞空
               _self.formLabelAlign.parentTag=''//select下拉滞空
               _self.formLabelAlign.parentTagCode=''
               booFlag = false//修改标记
           }
       })
       if(booFlag){//判断标记true说明虽然第二次点击，但是不是取消选择，只是修改选择节点
           if (b.checkedKeys.length > 0) {//判断节点选择树大于零说明是修改
               if(a.pcode === '0'){//第一子结点后端返回pcode父节点为'0'，作为判断依据
                   _self.checkedKeys=[a.code]//将当前节点存储
                   _self.checkTreeName=[a.label]//将当前节点名称存储
                   _self.$nextTick(() => {
                       _self.$refs.tagTree.setCheckedKeys(_self.checkedKeys);//设置勾选节点
                   });
               }else{//否则说明当前节点是勾选节点
                   _self.checkedKeys=[a.code,a.pcode]//存储父节点和当前节点code
                   _self.checkTreeName=[a.label]//存储当前节点名称
                   _self.checkPcode(resArr,a)//对冒泡排序重组map进行对比存储当前节点向上所有父节点的名称和节点code
                   _self.$nextTick(() => {
                       _self.$refs.tagTree.setCheckedKeys(_self.checkedKeys);//设置树选择
                   });
               }
           }
           _self.prevCheckNode=_self.checkedKeys//存储节点
           _self.prevCheckName=_self.checkTreeName//存储节点名称
           for (let i = _self.prevCheckName.length - 1; i >= 0; i--) {//存储时父节点在后，所以倒序遍历并给到select
               _self.formLabelAlign.parentTag += `/${_self.prevCheckName[i]}`
           }
       }
       _self.$refs.sarchTree.blur()//调用select blur()方法隐藏select
   }else{//说明时第一次进行选择树节点
       if (b.checkedKeys.length > 0) {//判断节点选择树大于零说明是修改
           if(a.pcode === '0'){//第一子结点后端返回pcode父节点为'0'，作为判断依据
               _self.checkedKeys=[a.code]//将当前节点存储
               _self.checkTreeName=[a.label]//将当前节点名称存储
               _self.$nextTick(() => {
                   _self.$refs.tagTree.setCheckedKeys(_self.checkedKeys);//设置勾选节点
               });
           }else{//否则说明当前节点是勾选节点
               _self.checkedKeys=[a.code,a.pcode]//存储父节点和当前节点code
               _self.checkTreeName=[a.label]//存储当前节点名称
               _self.checkPcode(resArr,a)//对冒泡排序重组map进行对比存储当前节点向上所有父节点的名称和节点code
               _self.$nextTick(() => {
                   _self.$refs.tagTree.setCheckedKeys(_self.checkedKeys);//设置树选择
               });
           }
       }
       _self.prevCheckNode=_self.checkedKeys//存储节点
       _self.prevCheckName=_self.checkTreeName//存储节点名称
       for (let i = _self.prevCheckName.length - 1; i >= 0; i--) {//存储时父节点在后，所以倒序遍历并给到select
           _self.formLabelAlign.parentTag += `/${_self.prevCheckName[i]}`
       }
       _self.$refs.sarchTree.blur()//调用select blur()方法隐藏select
   }
   _self.formLabelAlign.parentTagCode=a.code
},
checkPcode(a,b){//检查当前节点的向上父节点，冒泡遍历存储
   let _self=this
   if(b.pecode !== '0'){
       a.forEach(i => {
           if(i.code === b.pcode){
               _self.checkedKeys.push(i.code)
               _self.checkTreeName.push(i.label)
               _self.checkPcode(a,i)
           }
       })
   }
},
sarchTagChange(){//清空select时清空树和对应存储内容
   let _self=this
   if(this.formLabelAlign.parentTag === ''){
       _self.$nextTick(() => {
           _self.$refs.tagTree.setCheckedKeys([]);
       });
       _self.prevCheckNode=[]
       _self.prevCheckName=[]
       _self.formLabelAlign.parentTagCode=''
   }
},
getTagMap(tdata,resData){//冒泡遍历后端json数据，存储方便使用的数据
   let _self=this
　　if(Array.isArray(tdata) && tdata.length>0){
　　　　tdata.forEach(function(v,i){
　　　　　　 var newValue={
               'code':v.code,
               'label':v.label,
               'pcode':v.pcode
           };
　　　　　　     resData.push(newValue)
           _self.getTagMap(v.children,resData);
　　　　});
　　}
},