实现效果图,一二级都是灰色的不可选,三级只能同时选中一个
<el-treev-model="selectedNode":data="deptOptions":props="{ label: 'title', children: 'children' }" //自定义名称和子集的字段:render-after-expand="false"node-key="stationId" //自定义主键show-checkbox //开启复选框check-strictly //取消父子节点的关联highlight-currentdefault-expand-all@check="handleCheck" //选中节点事件:filter-node-method="filterNode"ref="deptTreeRef"/>
只要给对应的节点添加字段"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>