解决Element-ui el-tree数据与显示不对应的问题

如图:

后端返回的权限列表,并没有列表 这一项,但是由于父节点 版本打包为选中状态,导致所有子节点都为选中状态。

实现代码如下:

html 复制代码
<el-tree
    ref="tree"
    :data="records"
    show-checkbox
    node-key="id"
    :default-expanded-keys="expandedKeys"
    :default-checked-keys="checkedKeys"
    :props="defaultProps"
/>
javascript 复制代码
this.$refs.tree.setCheckedKeys(checkedKeys);

问题原因:

使用 setCheckedKeys 会存在这个问题,使用 setChecked 可以解决这个问题。

实现代码如下:

复制代码
this.$nextTick(function(){
    var self = this;
    checkedKeys.forEach((value) => {
        self.$refs.tree.setChecked(value, true, false);
    });
})
相关推荐
Jiude7 分钟前
AI 全栈时代的工程化护栏:Vben-Nest 让 Mock 契约落地成真实后端
前端·后端·nestjs
敲敲了个代码12 分钟前
[特殊字符] 空数组的迷惑行为:为什么 every 为真,some 为假?
前端·javascript·react.js·面试·职场和发展
海绵宝龙31 分钟前
前端网页录屏是怎么实现的
前端
勇往直前plus1 小时前
python格式化字符串
开发语言·前端·python
恋猫de小郭1 小时前
Flutter 的真正价值是什么?深度解析再结合鸿蒙,告诉你 Flutter 的真正优势
android·前端·flutter
micro_xx1 小时前
Matlab 有限元分析三维悬臂梁变形
前端·数据库·matlab
web3.08889991 小时前
获得某红书笔记评论说明-item_review
服务器·前端·数据库
UrbanJazzerati1 小时前
Vue 3 全局错误处理详解与示例
前端
木斯佳1 小时前
前端八股文面经大全:小红书前端日常实习(2026-1-5)·面经深度解析
前端
HelloReader1 小时前
Trunk + Tauri 前端配置Rust/WASM 项目如何稳定接入桌面与移动端(Trunk 0.17.5)
前端