element tree树形组件回显数据问题解决
更新时间：2022年8月14日 15:54 点击：822 作者：bigSmileZ
解决vue+element tree组件 回显数据时有一个父节点数据下面子节点就都会被选中
1.当el-tree 从后台拿到数据动态回显展示出来时，只要有一个父节点，则下面的所有子节点全部被勾选了
如图所示：
后台返回的回显数据只有33（父节点组织管理）45（子节点个人管理），但是组织管理下的所有子节点都被回显选中。
2.解决方法代码如下
先在组件上绑定check-strictly属性
check-strictly属性控制是否严格的遵循父子不互相关联的做法，默认为 false
具体参考element官网api。
代码如下（示例）：
<el-tree :data="menuList"
:props="menuListTreeProps"
node-key="menuId"
ref="menuListTree"
:check-strictly="isCheck"
show-checkbox>
</el-tree>
export default {
data () {
isCheck: false,
}
}
//js操作
//首先先拿到后台返回需要回显的id数组 假如是showData数组
//第一步先设置 check-strictly绑定的属性为true 为了是解除父子节点的关联（意思就是点击勾选父节点的时候下边的所有子节点都不会选中。）
//第二步设置回显 使用element Api的setCheckedKeys（showData）方法进行设置
//最后回显成功之后通过$nextTick异步方法再把check-strictly绑定的属性值设置为false。（一定要有这步操作，不设置的话，勾选父节点子节点不会被勾选中）
//具体代码如下 :
this.isCheck= true //重点：回显之前一定要设置为true
this.$nextTick(()=>{
this.$refs.menuListTree.setCheckedKeys(这里写接口获取的数据) //给树节点赋值回显
this.isCheck= false //重点： 赋值完成后 设置为false
})
这样问题就解决了。
总结
总而言之需要多了解element提供的api方法以及属性的作用，到此这篇关于element tree树形组件回显数据问题解决的文章就介绍到这了,更多相关element tree树形组件回显内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
原文出处：https://blog.csdn.net/weixin_46054431/article/details/117221
相关文章
解决Element-ui el-table合计行 show-summary 不显示的问题
有时候需要在table的底部有合计，这时候官方给的是在table里设置，show-summary就可以了但是给table加了一个固定高度的话，就不显示了，打开控制台可以看到这个合计是存在的那么需...2020-12-11vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了Element PageHeader页头的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要为大家详细介绍了vue+element ui实现锚点定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-06-29
- 这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10
- 这篇文章主要介绍了vue中如何使用element的日历组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
- 这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要介绍了Element-ui upload上传文件限制的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-25
- 这篇文章主要介绍了Element Card 卡片的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-26
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
这篇文章主要介绍了Element-ui 自带的两种远程搜索(模糊查询)用法讲解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-29- 本文主要介绍了vue+element实现动态换肤的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-07
- 这篇文章主要介绍了vue element后台鉴权流程分析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-04-10
- 这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-19
- 本文主要介绍了Element的穿梭框数据量大时点击全选卡顿的解决方案，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-31
- 本文主要介绍了element表格行列拖拽的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-02
vue element table中自定义一些input的验证操作
这篇文章主要介绍了vue element table中自定义一些input的验证操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)
这篇文章主要介绍了element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-16解决element DateTimePicker+vue弹出框只显示小时
这篇文章主要介绍了解决element DateTimePicker+vue弹出框只显示小时，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-16- 这篇文章主要介绍了vue element el-transfer增加拖拽功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-16
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题，是小编给大家总结的一些react知识点，本文通过一个项目需求实例代码详解给大家介绍的非常详细，需要的朋友可以参考下...2021-06-02