el-tree 组件节点勾选：巧妙实现同级节点自动勾选
本文探讨在使用 el-tree 组件时，如何实现同一层级节点间的自动勾选功能，解决节点勾选的难题。
问题描述:
需求是在同一层级下，勾选一个节点会自动触发条件，从而勾选其他节点。例如：
勾选 2-1 节点，如果左侧标识符为 2，则自动勾选 2-0 节点；如果标识符为 3，则自动勾选 3-0 节点。2-0 和 3-0 节点勾选后，无法取消勾选。
解决方案:
造点AI
夸克 · 造点AI
325 查看详情
通过监听 check-change 事件，结合节点标签的特性，实现自动勾选逻辑。
判断勾选状态: 在 check-change 事件中，判断当前节点是否被勾选，以及同级 -0 节点是否被勾选。根据条件勾选: 如果当前勾选的节点不是 -0 节点，且其对应的 -0 节点未被勾选，则自动勾选 -0 节点。防止取消勾选: 如果 -0 节点被取消勾选，且同级其他节点被勾选，则重新勾选 -0 节点。
代码实现 (Vue.js):
import { ref } from 'vue';export default { setup() { const treeRef = ref(); const data = ref([ { label: 'root', children: [ { label: '2-0' }, { label: '2-1' }, { label: '2-2' }, { label: '3-0' }, { label: '3-1' }, { label: '3-2' }, ], } ]); const defaultProps = ref({ children: 'children', label: 'label', }); const handleCheckChange = (data, checked) => { const [type, index] = data.label.split('-'); const checkedNodes = treeRef.value.getCheckedNodes(); // 勾选 x-n，且 x-0 未勾选，则勾选 x-0 if (checked && index !== '0' && !checkedNodes.some(it => it.label === `${type}-0`)) { treeRef.value.setChecked(`${type}-0`, true); } // x-0 取消勾选，且有 x-n 被勾选，则重新勾选 x-0 if (!checked && index === '0' && checkedNodes.some(it => it.label !== `${type}-0` && it.label.startsWith(`${type}-`))) { treeRef.value.setChecked(`${type}-0`, true); } }; return { treeRef, data, defaultProps, handleCheckChange }; },};这段代码清晰地展示了如何通过 check-change 事件和 setChecked 方法实现自动勾选和防止取消勾选的功能。 请确保已正确安装 element-plus。 此方法利用了节点标签的规律性，如果节点标签格式不同，需要相应调整代码中的正则表达式或字符串匹配逻辑。
以上就是el-tree节点勾选难题：如何实现同一层级节点间的自动勾选？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/285324.html
微信扫一扫 
支付宝扫一扫 
