问题描述1、el-tree 勾选反显原本整个父子节点都勾选状态新增一个子节点因为父节点是全选状态所以新增的子节点也呈勾选状态实际是未勾选状态。2、用的是default-checked-keys 回显数据更新后必须在 $nextTick 中调用 setCheckedKeys这样才能确保树组件正确回显勾选状态。解决思路问题原因解决方案回显不生效default-checked-keys 非响应式使用 setCheckedKeys设置时机不对DOM 未渲染完成包裹在$nextTick中传了父节点 id父节点会强制全选并级联勾选所有子节点只传叶子节点 id 给 setCheckedKeys核心逻辑先处理子节点再根据子节点状态回推父节点只传叶子节点 id 给 setCheckedKeys父节点状态由组件自动计算markTreeChecked返回的是树数据本身不会影响setCheckedKeys的行为这样即使后端返回的数据中新增了子节点父节点也能正确呈现半选状态。htmlel-tree:datalistshow-checkbox node-keyidreftreedefault-expand-all:props{label: name,value: id}/el-tree获取数据及回显调用created 或 mounted// 获取树的数据getMenuTree().then(res{this.listres.data.data;// 获取已勾选的数据idreturngetEchoData();}).then(res{// 处理回显letmenuIds[];if(res.data.data.menuIdsres.data.data.menuIds.length0){menuIdsres.data.data.menuIds.split(,);}// 根据返回的 menuIds 处理树数据标记每个节点的选中状态用于界面展示this.markTreeChecked(this.list,menuIds);this.$nextTick((){if(this.$refs.tree){// 只传叶子节点 id避免父节点强制全选constleafIdsthis.filterLeafIds(this.list);this.$refs.tree.setCheckedKeys(leafIds);}});});methods// 递归标记树节点的选中状态markTreeChecked(treeData,checkedIds){treeData.forEach(node{if(node.childrennode.children.length0){// 先处理子节点constchildCheckedCountthis.markTreeChecked(node.children,checkedIds);// 根据子节点选中数量计算当前父节点状态constallCheckedchildCheckedCountnode.children.length;constnoneCheckedchildCheckedCount0;node.checkedallChecked;node.halfChecked!allChecked!noneChecked;}else{// 叶子节点直接判断是否在选中列表中node.checkedcheckedIds.includes(node.id);}});}// 收集所有选中的叶子节点 idfilterLeafIds(treeData){constleafIds[];consttraverse(nodes){nodes.forEach(node{if(node.childrennode.children.length0){traverse(node.children);}elseif(node.checked){leafIds.push(node.id);}});};traverse(treeData);returnleafIds;}
问题描述1、el-tree 勾选反显原本整个父子节点都勾选状态新增一个子节点因为父节点是全选状态所以新增的子节点也呈勾选状态实际是未勾选状态。2、用的是default-checked-keys 回显数据更新后必须在 $nextTick 中调用 setCheckedKeys这样才能确保树组件正确回显勾选状态。解决思路问题原因解决方案回显不生效default-checked-keys 非响应式使用 setCheckedKeys设置时机不对DOM 未渲染完成包裹在$nextTick中传了父节点 id父节点会强制全选并级联勾选所有子节点只传叶子节点 id 给 setCheckedKeys核心逻辑先处理子节点再根据子节点状态回推父节点只传叶子节点 id 给 setCheckedKeys父节点状态由组件自动计算markTreeChecked返回的是树数据本身不会影响setCheckedKeys的行为这样即使后端返回的数据中新增了子节点父节点也能正确呈现半选状态。htmlel-tree:datalistshow-checkbox node-keyidreftreedefault-expand-all:props{label: name,value: id}/el-tree获取数据及回显调用created 或 mounted// 获取树的数据getMenuTree().then(res{this.listres.data.data;// 获取已勾选的数据idreturngetEchoData();}).then(res{// 处理回显letmenuIds[];if(res.data.data.menuIdsres.data.data.menuIds.length0){menuIdsres.data.data.menuIds.split(,);}// 根据返回的 menuIds 处理树数据标记每个节点的选中状态用于界面展示this.markTreeChecked(this.list,menuIds);this.$nextTick((){if(this.$refs.tree){// 只传叶子节点 id避免父节点强制全选constleafIdsthis.filterLeafIds(this.list);this.$refs.tree.setCheckedKeys(leafIds);}});});methods// 递归标记树节点的选中状态markTreeChecked(treeData,checkedIds){treeData.forEach(node{if(node.childrennode.children.length0){// 先处理子节点constchildCheckedCountthis.markTreeChecked(node.children,checkedIds);// 根据子节点选中数量计算当前父节点状态constallCheckedchildCheckedCountnode.children.length;constnoneCheckedchildCheckedCount0;node.checkedallChecked;node.halfChecked!allChecked!noneChecked;}else{// 叶子节点直接判断是否在选中列表中node.checkedcheckedIds.includes(node.id);}});}// 收集所有选中的叶子节点 idfilterLeafIds(treeData){constleafIds[];consttraverse(nodes){nodes.forEach(node{if(node.childrennode.children.length0){traverse(node.children);}elseif(node.checked){leafIds.push(node.id);}});};traverse(treeData);returnleafIds;}
