el-tag与el-tree的结合使用

1. 想要达到的效果如图所示，点击tree复选框，生成相对于的tag标签，且不能重复选择，并且只有三级展示复选框提供选择。

2.将第一、二级设置不展示复选框 第一级设置

::v-deep.el-tree > .el-tree-node > .el-tree-node__content .el-checkbox {
   display: none;
 }

第二级设置

::v-deep.el-tree > .el-tree-node > .el-tree-node__children >.el-tree-node >.el-tree-node__content .el-checkbox{
 display: none;
}

题外设置只有最后一个节点展示复选框的css样式为

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

3.点击添加打开对话框el-tree复选框选择树代码和el-tag标签

//el-tree分类复选框树
     <el-dialog
      title="选择分类"  
      :visible.sync="dialogVisibleTwo"
       width="50%"
      :before-close="handleCloseDialog">
      <span class="treeStyle">
      <el-tree
      :data="dataThree"
      default-expand-all
      show-checkbox
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
      @check="handleCheck">
    </el-tree>
    </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="escCategory">取 消</el-button>
    <el-button type="primary" @click="firmCategory">确 定</el-button>
  </span>
</el-dialog>

//el-tag标签
<el-button size="small"  @click="addCategory">添加</el-button>
           <p><el-tag
            v-for="(item, i) in tagsList"
            :key="i"
            closable
            :disable-transitions="false"
            @close="categoryTagsClose(item)">
            {{ item.label }}
          </el-tag></p>


//el-tree的数据为
dataThree: [
       {
          id: 1,
          label: '一级 1',
         children: [{
            id: 2,
            label: '二级 2-1',
            children: [{
              id: 4,
              label: '三级 3-1-1',
              disabled:false
            }, ]
          }, {
            id: 20,
            label: '二级 2-2',
            children: [{
              id: 21,
              label: '三级 3-2-1',
              disabled:false
            }, {
              id: 22,
              label: '三级 3-2-2',
              disabled:false
            }]
          }]
        }, 
        {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1',
            disabled:true,
          }, {
            id: 6,
            label: '二级 2-2',
            disabled:true,
          }]
        }, 
        {
          id: 11,
          label: '一级 4',
          children: [{
            id: 12,
            label: '二级 4-1',
            disabled:false,
            children: [{
              id:13,
              label: '三级 4-1-1',
              disabled:false
            }, {
              id: 14,
              label: '三级 4-1-2',
              disabled:false
            }]
          }]
        },
        ],

4.树节点点击复选框点击事件

  handleCheck(data,checkData){
  //
          let tree = this.$refs.tree 
          this.breadList = []
          this.idList = []
          this.remarksList = []
          let boolean =  true 

          this.getTreeNode(tree.getNode(data))
          this.idNode=tree.getNode(data).data.id

          if(this.categoryTags.length>0){
              this.categoryTags.forEach((val,index)=>{
              if(val.id == this.idLabel){
                boolean=false
                this.categoryTags.splice(index,1) 
              }
            }) 
          }
          if(boolean){
            this.categoryTags.push({
              id:this.idLabel,
              label:this.breadLabel,
              //这个idNode是选中节点的id，目的是与el-tree绑定数据有关联
              idNode:this.idNode
            })
          }
        },
        
        //在此调用函数，通过data，或者key获得该节点的node，作为实参传入函数
        getTreeNode(node){
        if(node){
        //复选框选中的节点选中后禁用
        if(node.data.disabled===false){
          node.data.disabled=true
        }else{
          node.data.disabled=false
        }
        this.breadList.unshift(node.data.label),
        this.idList.unshift(node.data.id),
        this.breadList.forEach((val,index)=>{
            if(val===undefined){
              this.breadList.splice(index,1)
            }
        })
        this.idList.forEach((val,index)=>{
            if(val===undefined){
              this.idList.splice(index,1)
            }
        })
        this.getTreeNode(node.parent)//在此递归获得父级内容
        this.idNodeList= this.idList
        this.breadLabel = this.breadList.join('/')
        this.idLabel = this.idList.join('/')
      }},

5.分类标签删除

 categoryTagsClose(item){
 //点击"x"时，标签数组匹配到删除
 this.categoryTags.splice(this.breadList.indexOf(item), 1)
 //循环el-tree树循环到第三级时开始让第三级的每个结点的id与标签数组里面的idNode匹配，如果相等，就说明该节点已选中生成标签了，这时让此节点禁用，如果不相等，说明标签数组里已删除了此节点，这时让此节点恢复可勾选状态。
      this.dataThree.forEach(val=>{
        val.children.forEach(item=>{
          if(item.children===undefined){
             item.disabled=true
          }else{
            item.children.forEach(nodeId=>{
            if(this.categoryTags.length===0){
              nodeId.disabled=false
            }else{
              this.categoryTags.forEach(idNode=>{
              if(nodeId.id === idNode.idNode){
                nodeId.disabled=true
              }else{
                nodeId.disabled=false
              }
            })
            }
          })
          }
        })
      })
    },