el-tree 按分组区分单选和多选

需求：弹出一个会话框，框中标签称树形，并且其中部分数据项必选

效果:

点击确定输出：

[10,5,6,8]

代码：

<el-dialog title="API标签" :visible.sync="dialogApiLabelVisible" :close-on-click-modal="false">
   <el-tree
           id="apiTagTree"
           :data="tagData"
           show-checkbox
           node-key="id"
           :check-strictly="true"
           @check-change="handleCheckChange"
           :render-content="renderContent"
           :props="defaultApiLabelProps"
           ref="tree"
   >
   </el-tree>
   <div slot="footer" class="dialog-footer">
       <el-button type="danger" @click="dialogApiLabelVisible = false">取消</el-button>
       <el-button type="primary" @click="addApiLabel()">确认</el-button>
   </div>
</el-dialog>

data() {
  return {
  	ApiLabel:[],
    tagData: [{id: 1,name: '一级 1',nodes: [{id: 9,name: '三级 1-1-1'}, {id: 10,name: '三级 1-1-2'}]}, {id: 2,name: '一级 2',nodes: [{id: 5,name: '二级 2-1'}, {id: 6,name: '二级 2-2'}]}, {id: 3,name: '一级 3',nodes: [{id: 7,name: '二级 3-1'}, {id: 8,name: '二级 3-2'}]}],
    defaultApiLabelProps: {
        children: "nodes",
        label: "name"
    },
    selectedKeys: []
  }
},
methods: {
	// 获取当前已选择的
  handleCheckChange(data, checked, indeterminate) {
       // 单选节点组
       let singleNodeGroupList = [[9,10],[7,8]]
       // let singleNodeList = [9,10]
       if(checked) {
           // 判断是否是单选，若选中单选节点，先删除单选节点对应组的选中状态，然后把对应的选中项加入
           for (let i = 0; i < singleNodeGroupList.length; i++) {
               let singleNodeList = singleNodeGroupList[i];
               if (singleNodeList.includes(data.id)) {
                   this.ApiLabel = this.ApiLabel.filter(item => {
                       if (!singleNodeList.includes(item)) return item;
                   })
               }
           }
           this.ApiLabel.push(data.id)
       } else{
           for(let i = 0; i < this.ApiLabel.length; i++) {
               let curLabel = this.ApiLabel[i];
               if(curLabel == data.id) {
                   this.ApiLabel.splice(i,1)
               }
           }
       }
       // alert(JSON.stringify(this.ApiLabel))

       this.$refs.tree.setCheckedKeys(this.ApiLabel)
   },
   renderContent(h, { node, data, store }) {
       let needRequired = ['一级 1','一级 3']
       return (
           <div class="treeNode">
               <span class={needRequired.includes(data.name)?'requiredFlag':'noRequired'}>{data.name}</span>
           </div>
       )
   },
   // 添加API标签
   addApiLabel() {
       alert(JSON.stringify(this.ApiLabel))
   }
}

需要scoped

/* 标签选择树 只有叶子节点展示可选框 */
/deep/#apiTagTree .el-checkbox .el-checkbox__input {
    display:  none;
}
/deep/#apiTagTree .is-leaf + .el-checkbox .el-checkbox__input {
    display:  inline-block;
}

/deep/#apiTagTree .requiredFlag::before {
    content: "*";
    color: red;
    margin-right: 5px;
}

第二篇讲提交时的规则判断rules
https://blog.csdn.net/qq_36262395/article/details/115469406