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

<div @click="showTree=true">点击展示tree标签</div>
        <div class="contentTags"  v-if="showTree" >
          <tagtree :treeData="treeData" @canceltree="canceltree" :expandedkeys="expandedkeys" :checkedkeys="checkedkeys" @saveTree="saveTree"></tagtree>
        </div>
        <div>展示选择的标签</div>
        <div v-for="(newTreeDataitem,newTreeDataindex) in newTreeData" :key="newTreeDataindex+'newTreeDataindex'"><div>{{newTreeDataitem.labelValue}}</div>
          <span style="margin-right:8px;border:1px solid gray" v-for="(newTreeDatachild,newTreeDatachildindex) in newTreeDataitem.children" :key="newTreeDatachildindex+'newTreeDatachildindex'">{{newTreeDatachild.labelValue}} <span @click="closetree(newTreeDatachild,newTreeDataindex)" style="font-size:8px;color:red">删除</span></span>
        </div>

（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<node.children.length; i++) {
            xxx(node.children[i])
          }
        } else {
          arr.push(node)
        }
        return arr
      }
      xxx(node)
      return arr
    },
    //删除对应标签
    closetree(item,index){
       let findIndex = this.newTreeData[index].children.findIndex((ele) => {
            return ele.labelCode == item.labelCode;
        })
        this.newTreeData[index].children.splice(findIndex,1);
    },

三、子组件代码

（1）templete

<template>
  <div class="tree_warp">
    <div>请选择标签</div>
    <div>
      <el-tree
       :data="treeData"
          show-checkbox
          :node-key="nodekey"
          @check="checkTree"
          ref="tree"
          :default-expanded-keys="expandedkeys"
          :default-checked-keys="checkedkeys"
          :props="defaultProps">
      </el-tree>
    <div style="display:flex;justify-content:space-around;margin:10px">
        <div @click="repeattree">重置</div>
        <div @click="canceltree">取消</div>
        <div @click="saveTree">确定</div>
    </div>
    </div>
  </div>
</template>

（2）js

<script>
export default {
  name: '',
   data() {
    return {
      chooseInfo:[],//选中的
      checkedkey:[],选中的数据
      expandedkey:[]展开的数据
      
    };
  },
  props: {
    defaultProps:{
      type:Object,
      default:()=>{
        return{
           children: 'children',
           label: 'labelValue'
        }
      }
    },
    treeData:{
          type: Array,
          default:()=>{
            return []
          }
      },
    expandedkeys:{
      type:Array,
      default:()=>{
        return[]
      }
    },
    checkedkeys:{
      type:Array,
      default:()=>{
        return[]
      }
    },
    nodekey:{
      type:String,
      default:()=>{
        return 'labelCode'
      }
    }
  },
  computed: {},
  created(){
  },
  mounted(){
    this.checkedkey=this.checkedkeys
  },
  methods: {
    //重置方法
    repeattree(){
      this.$refs.tree.setCheckedKeys([]);
      this.checkedkey=[]
      this.chooseInfo=[]
      console.log('选中数据',this.chooseInfo);
    },
    //取消按钮
    canceltree(){
      this.$emit('canceltree')
    },
    // 确认按钮
    saveTree(){
      this.$emit('saveTree','确定',this.chooseInfo)
      console.log(this.chooseInfo);
    },
    //点击数据
    checkTree(checkedNodes,checkedKeys,halfCheckedNodes,halfCheckedKeys){
        this.chooseInfo=[]
        checkedKeys.checkedNodes.forEach(ele => {
          if(!ele[this.defaultProps.children]|| ele[this.defaultProps.children].length==0){
            this.chooseInfo.push(ele)
          }
        });
    }
  },
};
</script>

 （3）css

<style  scoped>
.tree_warp{padding-bottom: 10px;border-top: 1px solid #F3F4F4;min-height: 100px;max-height: 300px;overflow-y: scroll;}
</style>