vue+element-Tree控件 父子传值递归展示1级（父级）和3级标签

需求仅展示最外层父级标签和三级标签 ；二级标签不展示

element tree：Element - The world's most popular Vue UI framework

1、效果图

（1）默认展示

（2）点击选择标签

（3）点击确定按钮展示选中标签（1级、3级）

 （4）点击删除对应标签

二、父组件代码

（1） 父组件 templete

点击展示tree标签
        

          
        
        
展示选择的标签
        
{{newTreeDataitem.labelValue}}
          {{newTreeDatachild.labelValue}} 删除
        

（2）父组件 引入子组件

import tagtree from "./components/tree.vue";

 （3）js-data中的参数

data() {
    return {
      newTreeData:[],//最后组合的数据
      showTree:false,//是否展示选择标签框
      expandedkeys:[],//默认展开的数据
      checkedkeys:['4101101'],//默认选中的数据,
      treeData:[{
          labelCode: 1,
          labelValue: '一级 1',
          children: [{
            labelCode: 4,
            labelValue: '二级 1-1',
            children: [{
              labelCode: 9,
              labelValue: '三级 1-1-1',
            }, {
              labelCode: 10,
              labelValue: '三级 1-1-2'
            }]
          }]
        }, {
          labelCode: 2,
          labelValue: '一级 2',
          children: [{
            labelCode: 5,
            labelValue: '二级 2-1',
            children:[{
              labelCode:11,
              labelValue:'三级1-1-3'
            },{
              labelCode:12,
              labelValue:'三级1-1-4'
            }]
          }, {
            labelCode: 6,
            labelValue: '二级 2-2'
          }]
        }, {
          labelCode: 3,
          labelValue: '一级 3',
          children: [{
            labelCode: 7,
            labelValue: '二级 3-1'
          }, {
            labelCode: 8,
            labelValue: '二级 3-2'
          }]
      }],
}

（4）js-methods

 getlistProbeShopTag(){
       //调用接口获取的结构，根据各自需求获取即可
      listProbeShopTag(4).then((res)=>{
        this.treeData=res.data
        this.expandedkeys=[]
        //默认展开数据第一条
        if(this.treeData.length>0){
          this.expandedkeys.push(res.data[0].labelCode)
        }
      })
    },
    //取消事件
    canceltree(){
      this.showTree=false
    },
    //确认事件
    saveTree(type,id){//从子组件传回的值
      this.showTree=false
      this.checkedkeys=[]
      id.forEach((ele)=>{
        this.checkedkeys.push(ele.labelCode)
      })
      console.log(this.checkedkeys);
      this.initNeetree()
    },
    //初始化组合数据
    initNeetree(){
      this.newTreeData=[]
      this.treeData.forEach((ele)=>{
        let item={
          children:[],
          labelCode:ele.labelCode,
          labelLevel:ele.labelLevel,
          labelValue:ele.labelValue
        }
        let lastChild=this.initxxx(ele)
        lastChild.forEach((ele)=>{
          if(this.checkedkeys.includes(ele.labelCode)){
            item.children.push(ele)
          }
        })
          if(item.children.length>0){
              this.newTreeData.push(item)
          }
      })

    },
    //递归方法 
    initxxx(node){
      let arr=[]
       function xxx(node) {
        if (node.children && node.children.length) {
          for (let i = 0; i {
            return ele.labelCode == item.labelCode;
        })
        this.newTreeData[index].children.splice(findIndex,1);
    },

三、子组件代码

（1）templete

（2）js

 （3）css