2023年6月22日发(作者：)

el-tree按分组区分单选和多选需求：弹出⼀个会话框，框中标签称树形，并且其中部分数据项必选效果:点击确定输出：[10,5,6,8]代码：

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 < ; i++) { let singleNodeList = singleNodeGroupList[i]; if (es()) { el = (item => { if (!es(item)) return item; }) } } () } else{ for(let i = 0; i < ; i++) { let curLabel = el[i]; if(curLabel == ) { (i,1) } } } // alert(ify(el)) this.$ckedKeys(el) }, renderContent(h, { node, data, store }) { let needRequired = ['⼀级 1','⼀级 3'] return (

) }, //

添加API标签 addApiLabel() { alert(ify(el)) }}需要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;}