elementui el-tree 勾选/取消勾选:子级关联,父级不关联
:check-strictly="true" 父子不关联,在方法里处理子级关联逻辑
setChecked方法需要定义node-key="id"
<el-tree ref="tree" :data="treeData" :props="defaultProps" default-expand-all highlight-current :expand-on-click-node="false" :check-strictly="true" node-key="id" show-checkbox class="JNPF-common-el-tree" @check-change="handleCheckChange"> <span class="custom-tree-node" slot-scope="{ data, node }" :title="data.groupName"> <span class="text" :title="data.groupName">{{ node.label }}</span> </span> </el-tree> data() { return { treeData: [], defaultProps: { children: 'child', label: 'groupName', }, } },
// 点击勾选框 handleCheckChange(data, checked) { this.$refs.tree.setChecked(data, checked) //勾选/取消勾选:子级关联,父级不关联 if (data.child && data.child.length > 0) { this.changeChildrenFun(data.child, checked) } }, changeChildrenFun(data, checked) { data.forEach(item => { this.$refs.tree.setChecked(item, checked) if (item.child && item.child.length > 0) { this.changeChildrenFun(item.child, checked) } }) },
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~