el-tree选择限制(只能三级单选el-checkbox多选框）及节点默认展开和默认选中

效果图

一、主要代码

 <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: [],
            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;
}

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