解决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);
    });
})
相关推荐
ss2731 分钟前
AI全栈实战 | 2.2-02 React 思维模型:数据不可变 vs Vue 数据可变,两种哲学把复杂度推给谁
前端·vue.js·react.js
想吃火锅10052 分钟前
【leetcode】189.轮转数组js
开发语言·javascript·leetcode
天衍四九-5 分钟前
Docker Compose企业实战系列(三):Vue/React前端项目容器化完整部署
前端·vue.js·docker
Rosanci19 分钟前
从零到合入主线:我的 DeepSeek Harness 开源贡献实战手记
开发语言·前端·开源
用户9608198422327 分钟前
多周期联看时十字光标对不齐:前端排查「时间桶」的三步清单
前端
墨鱼老师28 分钟前
SpringBoot+Vue 毕设项目开发踩坑记录(前后端分离)
vue.js·spring boot·毕业设计·课程设计·前后端分离·java 毕设
Data analyse4561 小时前
数据合规的敏感数据怎么识别?
前端·人工智能·数据分析
雪芽蓝域zzs1 小时前
Vue3 + Element Plus el-select 下拉弹窗
vue.js·elementui
陪我一起学编程1 小时前
vue3笔记
前端·webpack·vue3·vite·脚手架·vue3笔记·组件式
Wx-bishekaifayuan1 小时前
springboot房屋租赁系统11574-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·sql·spring·课程设计