解决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);
    });
})
相关推荐
hulkie9 分钟前
从 AI 对话应用理解 SSE 流式传输:一项 "老技术" 的新生
前端·人工智能
dobym12 分钟前
里程碑五:Elpis框架npm包抽象封装并发布
前端
全栈老石15 分钟前
手写无限画布4 —— 从视觉图元到元数据对象
前端·javascript·canvas
牛奶16 分钟前
React 底层原理 & 新特性
前端·react.js·面试
用户114896694410522 分钟前
VUE3响应式原理——从零解析
vue.js
parade岁月23 分钟前
Tailwind CSS v4 — 当框架猜不透你的心思
前端·css
用户830407130570125 分钟前
SPA 首屏加载速度慢怎么解决?
vue.js·webpack
小明91325 分钟前
基于Rokid CXR-M SDK的AI饮食健康助手开发实战
前端
一枚前端小姐姐26 分钟前
低代码平台表单设计系统技术分析(实战三)
前端·vue.js·低代码
牛奶27 分钟前
ts随笔:面向对象与高级类型
前端·面试·typescript