【el-tree】外层多选，某个属性内层单选

js 复制代码

<el-tree ref="treeLocation" id="treeLocation" show-checkbox check-strictly default-expand-all :data="treeData.location"
    node-key="virtualOBJID" :props="{
                                        children: 'childModels',
                                        label: 'returnOBJName'
                                    }"
    :expand-on-click-node="false" @check-change="handleCheckChange">
    <span class="custom-tree-node" slot-scope="{ node, data }">
        <span :class="'class'+data.returnOBJType">{{ node.label }}</span>
    </span>
</el-tree>

//js
data() {
  return {
      treeData: {
          location: []
      },
      sixLevelSelectedKey: null,
      returnOBJType: 0,
  }
},
mounted() {
    this.getJson()
    setTimeout(()=>{
            var lists = document.getElementsByClassName('class6')
            for(var i=0;i<lists.length;i++){
            var parent = lists[i].parentNode.parentNode;
            // 获取父元素的所有子元素
            var siblings = Array.from(parent.children);
            // 找到特定的兄弟元素，例如通过类名或者ID
            var specificSibling = siblings.find(sibling => sibling.className === "el-checkbox");
            var childElement = specificSibling.querySelector('.el-checkbox__inner');
            childElement.style = "border-radius: 50% !important;";
            }
    },500)
},
methods: {
    handleCheckChange(data, checked, indeterminate) {
        if (checked) {
            this.returnOBJType = data.returnOBJType;
            //支路
            if (data.returnOBJType === 6) {
                this.sixLevelSelectedKey = data.returnOBJID;
                // 更新当前选中的第returnOBJType=6层节点
                this.$refs.treeLocation.setCheckedKeys([data.returnOBJID]);
            } else {
                // 如果之前已有第returnOBJType=6层节点被选中，先取消其选中状态
                if (this.sixLevelSelectedKey !== null && this.sixLevelSelectedKey !== data.returnOBJID) {
                    this.$refs.treeLocation.setChecked(this.sixLevelSelectedKey, false);
                }
                // 取消选中时清空记录
                this.sixLevelSelectedKey = null;
            }
        }
    },
    filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
    },
    getJson() {
        fetch('./mock/elTree.json')
            .then(response => response.json())
            .then(res => {
                this.treeData.location = res.data
            })
            .catch(error => console.error('Error:', error))
    }
},

elTree.json

json 复制代码

{
    "msg": "执行成功",
    "code": 200,
    "data": [
        {
            "virtualOBJID": "508100_50000001",
            "returnOBJID": "50000001",
            "returnOBJName": "A区",
            "returnOBJType": 2,
            "childModels": [
                {
                    "virtualOBJID": "50000001_321505",
                    "returnOBJID": "321505",
                    "returnOBJName": "综合楼建筑",
                    "returnOBJType": 3,
                    "childModels": [
                        {
                            "virtualOBJID": "5000000101",
                            "returnOBJID": "5000000101",
                            "returnOBJName": "A区工商管理大楼",
                            "returnOBJType": 4,
                            "childModels": [
                                {
                                    "virtualOBJID": "500000010110001",
                                    "returnOBJID": "500000010110001",
                                    "returnOBJName": "建筑总用电",
                                    "returnOBJType": 6,
                                    "childModels": [
                                        {
                                            "virtualOBJID": "500000010110002",
                                            "returnOBJID": "500000010110002",
                                            "returnOBJName": "六楼",
                                            "returnOBJType": 6,
                                            "childModels": []
                                        },
                                        {
                                            "virtualOBJID": "500000010110003",
                                            "returnOBJID": "500000010110003",
                                            "returnOBJName": "三楼",
                                            "returnOBJType": 6,
                                            "childModels": []
                                        }
                                    ]
                                },
                                {
                                    "virtualOBJID": "500000010110024",
                                    "returnOBJID": "500000010110024",
                                    "returnOBJName": "A区工商管理大楼灯饰工程",
                                    "returnOBJType": 6,
                                    "childModels": []
                                }
                            ]
                        },
                        {
                            "virtualOBJID": "5000000197",
                            "returnOBJID": "5000000197",
                            "returnOBJName": "A区综合大楼本楼",
                            "returnOBJType": 4,
                            "childModels": []
                        },
                        {
                            "virtualOBJID": "5000000901",
                            "returnOBJID": "5000000901",
                            "returnOBJName": "A区研究生院",
                            "returnOBJType": 4,
                            "childModels": []
                        }
                    ]
                }
            ]
        }
    ]
}