实现效果图,一二级都是灰色的不可选,三级只能同时选中一个
在这里插入图片描述

		<el-tree
            v-model="selectedNode"
            :data="deptOptions"
            :props="{ label: 'title', children: 'children' }"	//自定义名称和子集的字段
            :render-after-expand="false"
            node-key="stationId"	//自定义主键
            show-checkbox		//开启复选框
            check-strictly		//取消父子节点的关联
            highlight-current
            default-expand-all
            @check="handleCheck"	//选中节点事件
            :filter-node-method="filterNode"
            ref="deptTreeRef"
            class="stafftree"
        />

只要给对应的节点添加字段"disabled": true,即可禁用节点,因为使用了check-strictly取消父子节点关联,所有即使禁用父节点,也不会影响子节点的选择

<script setup>
    const deptOptions = ref([{
		"stationId": "8cd174b0-6c38-43f4-97b6-b64832b34d9a",
		"parentId": "",
		"title": "线路1",
		"children": [{
				"stationId": "cf5f8c07-a882-4e24-aec8-0983660c1dc9",
				"parentId": "8cd174b0-6c38-43f4-97b6-b64832b34d9a",
				"title": "车站2",
				"children": [{
						"stationId": "1cf5f8c07-a882-4e24-aec8-0983660c1dc9",
						"parentId": "cf5f8c07-a882-4e24-aec8-0983660c1dc9",
						"title": "计算机联锁图册",
						"children": [],
					},
					{
						"stationId": "2cf5f8c07-a882-4e24-aec8-0983660c1dc9",
						"parentId": "cf5f8c07-a882-4e24-aec8-0983660c1dc9",
						"title": "区间自动闭塞图册",
						"children": [],
					}
				],
				"disabled": true
			},
			{
				"stationId": "ef59bc57-aa42-43b8-960f-ce9caf745484",
				"parentId": "8cd174b0-6c38-43f4-97b6-b64832b34d9a",
				"title": "车站1",
				"children": [{
						"stationId": "1ef59bc57-aa42-43b8-960f-ce9caf745484",
						"parentId": "ef59bc57-aa42-43b8-960f-ce9caf745484",
						"title": "计算机联锁图册",
						"children": [],
					},
					{
						"stationId": "2ef59bc57-aa42-43b8-960f-ce9caf745484",
						"parentId": "ef59bc57-aa42-43b8-960f-ce9caf745484",
						"title": "区间自动闭塞图册",
						"children": [],
					}
				],
				"disabled": true
			}
		],
		"disabled": true
	},
		{
		"stationId": "5226d1f5-b85f-46c7-b05f-157815d590b8",
		"parentId": "",
		"title": "线路3",
		"children": [{
				"stationId": "cd8a7881-a2f0-4490-afe0-44bd639c149e",
				"parentId": "5226d1f5-b85f-46c7-b05f-157815d590b8",
				"title": "车站2",
				"children": [{
						"stationId": "1cd8a7881-a2f0-4490-afe0-44bd639c149e",
						"parentId": "cd8a7881-a2f0-4490-afe0-44bd639c149e",
						"title": "计算机联锁图册",
						"children": [],
					},
					{
						"stationId": "2cd8a7881-a2f0-4490-afe0-44bd639c149e",
						"parentId": "cd8a7881-a2f0-4490-afe0-44bd639c149e",
						"title": "区间自动闭塞图册",
						"children": [],
					}
				],
				"disabled": true
			},
			{
				"stationId": "289103d4-0d1f-4c3e-93b5-e382b0a58044",
				"parentId": "5226d1f5-b85f-46c7-b05f-157815d590b8",
				"title": "车站1",
				"children": [{
						"stationId": "1289103d4-0d1f-4c3e-93b5-e382b0a58044",
						"parentId": "289103d4-0d1f-4c3e-93b5-e382b0a58044",
						"title": "计算机联锁图册",
						"children": [],
					},
					{
						"stationId": "2289103d4-0d1f-4c3e-93b5-e382b0a58044",
						"parentId": "289103d4-0d1f-4c3e-93b5-e382b0a58044",
						"title": "区间自动闭塞图册",
						"children": [],
					}
				],
				"disabled": true
			},
			{
				"stationId": "481b0a4e-7523-4023-9a8c-1af6a51c125e",
				"parentId": "5226d1f5-b85f-46c7-b05f-157815d590b8",
				"title": "车站3",
				"children": [{
						"stationId": "1481b0a4e-7523-4023-9a8c-1af6a51c125e",
						"parentId": "481b0a4e-7523-4023-9a8c-1af6a51c125e",
						"title": "计算机联锁图册",
						"children": [],
					},
					{
						"stationId": "2481b0a4e-7523-4023-9a8c-1af6a51c125e",
						"parentId": "481b0a4e-7523-4023-9a8c-1af6a51c125e",
						"title": "区间自动闭塞图册",
						"children": [],
					}
				],
				"disabled": true
			}
		],
		"disabled": true
	}
]);
    const selectedNode = ref(null);
    const deptTreeRef = ref(null);
    
	/** 通过条件过滤节点  */
    const filterNode = (value, data) => {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    };

    //选中事件
    function handleCheck(checkedNode) {
      //实现单选关键就是这一点:在选中某个项之后,将选中的节点数组只设置成当前选中的节点,保证只有一个选项
      deptTreeRef.value.setCheckedKeys([checkedNode.stationId]);
    }
</script>

如果要隐藏一二级节点,可以添加css样式实现

<style scoped>
    ::v-deep .stafftree > .el-tree-node > .el-tree-node__content > .el-checkbox {
      display: none; /* 隐藏一级节点复选框 */
    }

    ::v-deep .stafftree > .el-tree-node > .el-tree-node__children > .el-tree-node > .el-tree-node__content > .el-checkbox {
      display: none; /* 隐藏二级节点复选框 */
    }

    /* 隐藏三级节点复选框 */
    /*::v-deep .stafftree > .el-tree-node > .el-tree-node__children > .el-tree-node > .el-tree-node__children > .el-tree-node > .el-tree-node__content > .el-checkbox {*/
    /*  display: none;*/
    /*}*/
</style>

在这里插入图片描述

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐