解决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);
    });
})
相关推荐
hhcccchh13 分钟前
学习vue第七天 从单页面应用(SPA)进化为后台管理系统架构
vue.js·学习·系统架构
sen_shan32 分钟前
《Vue项目开发实战》第八章:组件封装--vxeGrid
前端·javascript·vue.js
五点六六六33 分钟前
双非同学校招笔记——离开字节入职小📕
前端·面试·程序员
IT_陈寒34 分钟前
Redis实战:5个高频应用场景下的性能优化技巧,让你的QPS提升50%
前端·人工智能·后端
2***574235 分钟前
Vue项目国际化实践
前端·javascript·vue.js
我也爱吃馄饨36 分钟前
写的webpack插件如何适配CommonJs项目和EsModule项目
java·前端·webpack
全马必破三37 分钟前
HTML常考知识点
前端·html
3秒一个大1 小时前
JavaScript 作用域:从执行机制到块级作用域的演进
javascript
OLong1 小时前
忘掉"发请求",声明你要的数据:TanStack Query 带来的思维革命
前端
琦遇1 小时前
Vue3使用vuedraggable实现拖拽排序
前端