element-plus:el-tree-select加了check-strictly、check-on-click-node后无法点击复选框,只能点击文字才能选择

在element-plus版本2.2.2和vue3.2.31环境下,使用el-tree-select组件时,结合check-strictly和check-on-click-node属性,会导致只能通过点击文字而非复选框来选择节点。此行为疑似bug,尤其当组件置于el-form-item内部时表现更为明显,解决方案是将组件移出el-form-item外部处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

element-plus:el-tree-select加了check-strictly、check-on-click-node后无法点击复选框,只能点击文字才能选择

测试版本:element-plus2.2.2, vue3.2.31
应该是bug,排除后发现el-form-item下就会导致这样的情况,所以要自己在form外面进行处理

### 如何在 `el-tree-select` 中移除复选框 为了实现在 `el-tree-select` 组件中移用或去除复选框的效果,可以通过多种方式来达成目标。一种常见的方式是在样式层面隐藏带有特定属性的复选框,例如通过 CSS 来隐藏具有 `disabled` 属性的 `.el-checkbox__input.is-disabled` 元素[^1]。 对于更彻底地控制复选框的行为,在某些情况下可能需要自定义树节点的内容而不依赖于内置的 `show-checkbox` 属性。这涉及到重写模板部分并手动处理选择逻辑。如果使用的是较旧版本的 Element UI 并且遇到不支持的功能,则可以考虑采用替代策略,比如监听树节点展开事件 (`@node-expand`) 或者其他交互操作,并动态调整节点的状态以适应业务需求[^3]。 另外,当希望完全去掉复选框而仅保留单选行为时,可以在配置项里关闭 `show-checkbox` 参数,并确保每次点击节点都会触发相应的选择动作而不是默认的多选模式[^5]。 #### 实现代码示例: ```vue <template> <div> <!-- 使用 el-selectel-tree 结合 --> <el-select v-model="value" multiple placeholder="请选择"> <el-option :value="selectTree" class="setstyle" disabled> <el-tree :data="list" :props="defaultProps" ref="tree" :show-checkbox="false" // 关闭复选框显示 check-strictly :expand-on-click-node="false" @check-change="handleNodeClick" ></el-tree> </el-option> </el-select> </div> </template> <script> export default { data() { return { value: [], list: [ // 树数据... ], defaultProps: { children: 'children', label: 'label' } }; }, methods: { handleNodeClick(data, checked, indeterminate) { console.log('Node clicked:', data); } } }; </script> <style scoped> /* 如果还需要进一步定制外观 */ /deep/ .el-checkbox__input.is-disabled { display: none; } </style> ``` 上述代码展示了如何通过设置 `:show-checkbox="false"` 来禁用整个树上的复选框选项。同时提供了样式的修改作为补充手段用于特殊情况下的微调[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值