解决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);
    });
})
相关推荐
千里马-horse19 分钟前
React Native 源码分析 -- jsi.h
javascript·c++·react native·react.js·jsi
毕设源码-朱学姐1 小时前
【开题答辩全过程】以 基于Web的餐饮管理系统的设计为例,包含答辩的问题和答案
前端
MoonPointer-Byte1 小时前
[特殊字符]The Omniscient Tome | 全知之书
javascript·html5
fanruitian2 小时前
visualstudio code cline使用mcp amap
java·前端·visual studio
lzh_hz3 小时前
zustand源码解析
前端·源码阅读
无声20173 小时前
Turborepo 的 Docker 化实战
前端·vue.js
韭菜炒大葱3 小时前
React 之 自定义 Hooks 🚀
前端·react.js·面试
用户91743965393 小时前
Magnitude:强!一款基于 Al 视觉的 Web 自动化框架
运维·前端·自动化
POLITE33 小时前
Leetcode 21.合并两个有序链表 JavaScript (Day 10)
javascript·leetcode·链表
止观止3 小时前
告别回调地狱:深入理解 JavaScript 异步编程进化史
javascript·ecmascript·promise·async/await·异步编程·前端进阶