基于el-tree添加标签

 实现如图的功能，点击选中复选框，实时渲染右侧标签，右侧标签由本身的内容和它的所有父级内容组成。

首先 实现左侧的树形分类，带复选框（只有最后一级有）

  <div class="dialog">
        <span>关键字：</span>
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>
        <el-tree
          :data="bussinessList"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree"
          highlight-current
          show-checkbox
          node-key="value"
           @check="handleCheckChange"
        >
        </el-tree>
      </div>

实现只有三级带复选框代码 最简单的是设置css  样式

/deep/ .el-tree-node {
  .is-leaf + .el-checkbox .el-checkbox__inner {
    display: inline-block;
  }
  .el-checkbox .el-checkbox__inner {
    display: none;
  }
}

 

实现右侧标签功能

 <div  class="dialog" style="margin-left:30px">
            <el-tag type="success" v-for="(item) in tagList" :key="item.id">{{item.name}}</el-tag>
 </div>


handlecheckChange(data){
let tree = this.$refs.tree
//初始化三个数组：id，value,remarks
this.breadList = []
this.idList = []
this.remarksList = []
let booleean =  true 
//在此调用函数，通过data，或者key获得该节点的node,作为实参传入函数

this.getTreeNode(tree.getNode(data.value))

//判断标签的数组中有没有内容，如果有 判断是否重复，没有直接push

if(this.tagList.length>0){
  
  this.tagList.forEach((element,index) => {
  if(element.id == this.idLabel){
      boolean = false
     this.tagList.splice(index,1)//id重复删除
   }
 })
if(boolean){
this.tagList.push({
    id:this.idLabel,
    name:this.breadLabel,
    remarks:this.remarksLabel
   })
  }
}else{
 this.tagList.push({
    id:this.idLabel,
    name:this.breadLabel,
    remarks:this.remarksLabel
   })
  }
}

getTreeNode(node){
if(node){
   this.breadList.unshift(node.data.label),
   this.idList.unshift(node.data.value),
   this.remarksList.unshift(node.data.reamrks) 

   this.getTreeNode(node.parent)//在此递归获得父级内容

   this.breadLabel = this.breadList.join('-')
    this.idLabel = this.idList.join('-')
   this.reamarksLabel = this.remarksList[this.remarksList.length-1]
   
}
}