解决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);
    });
})
相关推荐
想要成为糕糕手几秒前
前端异步编程的终极指南:从 Promise 到 async/await,这一次彻底搞懂!
javascript·promise
Cobyte5 分钟前
17.响应式系统比对:链表如何实现响应式系统的高效更新
前端·javascript·vue.js
2601_963771379 分钟前
Speeding Up Creative Agency Portfolios: A Performance Guide
前端·数据库·php
禅思院10 分钟前
AI对话前端从入门到崩溃:一个长对话引发的五层优化战争【二】
前端·前端框架·ai编程
虚心的百褶裙33 分钟前
JavaScript性能优化
开发语言·javascript·性能优化
IT_陈寒43 分钟前
React useEffect里面写异步,我的状态怎么老丢?
前端·人工智能·后端
凯小默1 小时前
10.JavaScript 中的类和对象以及继承
javascript·继承
AI视觉网奇1 小时前
BambuStudio 自定义加载页面
服务器·前端·javascript
橙子家1 小时前
Extension storage、Interest groups 和 Shared storage 简介-浏览器缓存之【隐私沙盒与扩展专用存储】
前端
漂流瓶jz2 小时前
理解Webpack插件机制:从插件使用、各类编译对象、Tapable到自定义插件与钩子开发
前端·javascript·webpack