vue3+element-ui-plus的el-tree组件实现复选框形式下的单选功能,且禁用父级
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
实现效果图,一二级都是灰色的不可选,三级只能同时选中一个
<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>

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


所有评论(0)