news 2026/7/24 11:53:35

tree回显问题

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
tree回显问题

问题描述:
1、el-tree 勾选反显,原本整个父子节点都勾选状态,新增一个子节点,因为父节点是全选状态,所以新增的子节点也呈勾选状态,实际是未勾选状态。
2、用的是default-checked-keys 回显
数据更新后,必须在 $nextTick 中调用 setCheckedKeys,这样才能确保树组件正确回显勾选状态。

解决思路:

问题原因解决方案
回显不生效default-checked-keys 非响应式使用 setCheckedKeys
设置时机不对DOM 未渲染完成包裹在$nextTick
传了父节点 id父节点会强制全选,并级联勾选所有子节点只传叶子节点 id 给 setCheckedKeys
  • 核心逻辑
  • 先处理子节点,再根据子节点状态回推父节点
  • 只传叶子节点 id 给 setCheckedKeys,父节点状态由组件自动计算
  • markTreeChecked返回的是树数据本身,不会影响setCheckedKeys的行为
    这样即使后端返回的数据中新增了子节点,父节点也能正确呈现半选状态。

html

<el-tree:data="list"show-checkbox node-key="id"ref="tree"default-expand-all:props="{label: 'name',value: 'id'}"></el-tree>

获取数据及回显调用(created 或 mounted)

// 获取树的数据getMenuTree().then(res=>{this.list=res.data.data;// 获取已勾选的数据idreturngetEchoData();}).then(res=>{// 处理回显letmenuIds=[];if(res.data.data.menuIds&&res.data.data.menuIds.length>0){menuIds=res.data.data.menuIds.split(',');}// 根据返回的 menuIds 处理树数据,标记每个节点的选中状态(用于界面展示)this.markTreeChecked(this.list,menuIds);this.$nextTick(()=>{if(this.$refs.tree){// 只传叶子节点 id,避免父节点强制全选constleafIds=this.filterLeafIds(this.list);this.$refs.tree.setCheckedKeys(leafIds);}});});

methods

// 递归标记树节点的选中状态markTreeChecked(treeData,checkedIds){treeData.forEach(node=>{if(node.children&&node.children.length>0){// 先处理子节点constchildCheckedCount=this.markTreeChecked(node.children,checkedIds);// 根据子节点选中数量,计算当前父节点状态constallChecked=childCheckedCount===node.children.length;constnoneChecked=childCheckedCount===0;node.checked=allChecked;node.halfChecked=!allChecked&&!noneChecked;}else{// 叶子节点:直接判断是否在选中列表中node.checked=checkedIds.includes(node.id);}});}// 收集所有选中的叶子节点 idfilterLeafIds(treeData){constleafIds=[];consttraverse=(nodes)=>{nodes.forEach(node=>{if(node.children&&node.children.length>0){traverse(node.children);}elseif(node.checked){leafIds.push(node.id);}});};traverse(treeData);returnleafIds;}
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/24 11:51:57

法律AI工具横评:五大产品实战表现与使用技巧

1. 法律AI工具横评背景与价值 去年处理一起商事仲裁案件时&#xff0c;对方律师突然提交了37份新证据。当时团队连夜整理质证意见&#xff0c;有位实习律师用某法律AI工具快速生成了证据关联性分析报告&#xff0c;为我们争取了宝贵时间。这次经历让我意识到&#xff1a;法律AI…

作者头像 李华
网站建设 2026/7/24 11:50:56

TDA2P-ACD串行通信时序深度解析:I2C、SPI、UART、QSPI、McASP实战指南

1. 项目概述与核心价值在嵌入式系统开发&#xff0c;尤其是汽车电子、工业控制这类对实时性和可靠性要求极高的领域&#xff0c;芯片与外部传感器、执行器、存储器和通信模块之间的数据交换是系统设计的命脉。I2C、SPI、UART这些串行通信接口&#xff0c;就像是芯片与外部世界对…

作者头像 李华
网站建设 2026/7/24 11:50:05

DRA78x引脚复用配置全解析:从硬件设计到软件驱动的嵌入式系统核心

1. DRA78x引脚复用&#xff1a;嵌入式硬件设计的“交通枢纽”在嵌入式硬件设计领域&#xff0c;尤其是面对像德州仪器DRA78x这样集成了视频处理、高速存储和丰富通信接口的复杂SoC时&#xff0c;引脚复用&#xff08;Pin Multiplexing&#xff09;是每个工程师都无法绕开的核心…

作者头像 李华
网站建设 2026/7/24 11:49:41

从足球术语争议看技术命名规范:API设计与多语言术语管理实践

最近&#xff0c;比利时国家足球队在社交媒体上的一则发文引发了广泛讨论。他们直接质疑美式橄榄球对"FOOTBALL"这一名称的"霸占"&#xff0c;强调真正的足球才是FOOTBALL&#xff0c;而不是soccer。这一看似简单的命名争议&#xff0c;背后其实反映了更深…

作者头像 李华