效果图

一、主要代码

 <el-tree
        :data="dataTree"
        :props="defaultProps"
        node-key="id"
        highlight-current
        ref="dataConfigTree"
        :expand-on-click-node="false"
        accordion
        show-checkbox
        nodeChange.isLeaf="true"
        :filter-node-method="filterNode"
        @check = 'getname'
        :default-checked-keys="checkIdList"
        :default-expanded-keys="expandedList"
    ></el-tree>
    
 data() {
        return {
            dataTree: [{children:[children:{
									id:1001
									label:"保险"},
						id:1000
						label:"保险"
				}],
			id:"customizeTagIds"
			label:"自主标签"
			}],
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            checkIdList:[], //默认勾选三级
            expandedList:[], //展开项
        }
    },

  getname(node,checkedNodes) {
       this.$nextTick(() => {
       //设置目前勾选的节点，使用此方法必须设置 node-key 属性    this.$refs.dataConfigTree.setCheckedKeys(this.checkIdList);
         })
     if (!node.children || !node.children.length) {
         if(checkedNodes.checkedNodes.length > 0){
             this.$refs.dataConfigTree.setCheckedKeys([node.id])
             return
         } 
     }else {
         this.$refs.dataConfigTree.setCheckedKeys([])
         this.$message.error('只能选择最后一级节点')
         return
     }
         // 获取当节点的值
         var getlist = this.$refs.dataConfigTree.getCheckedNodes().concat(this.$refs.dataConfigTree.getHalfCheckedNodes());
         console.log('选中节点',getlist)
         // 循环遍历当前节点的值
         for (var i in getlist) {
             // 判断子节点是否存在子节点 如果存在直接请求并且提示 false
             if(!getlist[i].hasOwnProperty("children") || !getlist[i].children.length ) {
             // 判断是否只选择一个 如果存在直接请求并且提示 false
             if(getlist.length == 1) {
                 console.log(getlist[0].id)
             }else {
                 console.log(this.$refs.dataConfigTree.getCurrentKey())
                 this.$message.error("只选择一个节点");
                 return
             }
             }else {
                 this.$refs.dataConfigTree.setCheckedKeys([]);
                 this.$message.error("只能选择当前分类最后的子分类");
             return
             }
         }
     },

<style lang="scss">
//只能单选样式
.el-tree-node__content label.el-checkbox {
    display: none;
  }
  .el-tree-node__children label.el-checkbox {
    display: inline-block;
    margin-left: -5px;
  }
  .el-tree-node {
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }

    .el-checkbox .el-checkbox__inner {
      display: none;
    }
}
.edit-clientele .chooseTitle span {
    margin: 5px;
}

//节点树图标修改
 .el-tree .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .el-tree .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    /* //有子节点 且未展开 */
    .el-tree .el-icon-caret-right:before {
        background: url('../../../../assets/images/tagAdd.png') no-repeat 0 3px;
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        font-size: 16px;
        background-size: 16px;
    }

    /* //有子节点 且已展开 */
    .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        background: url('../../../../assets/images/tagDel.png') no-repeat 0 3px;
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        font-size: 16px;
        background-size: 16px;
    }

    /* //没有子节点 */
    .el-tree .el-tree-node__expand-icon.is-leaf::before {
        background: #fff;
        content: '';
        display: block;
        width: 0px;
        height: 0px;
        font-size: 16px;
        background-size: 16px;
    }
    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        color: #409eff !important;
    }

链接: https://blog.csdn.net/heartandwater/article/details/113727402
链接: https://www.cnblogs.com/xingqitian/p/14511291.html
链接: https://blog.csdn.net/qq_41579104/article/details/115348469