element tree树形组件回显数据问题解决
更新时间：2022年08月14日 11:22:06 作者：bigSmileZ
本文主要介绍了element tree树形组件回显数据问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决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树形组件回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了使用Vue.js和MJML创建响应式电子邮件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了vue项目中使用crypto-js实现加密解密方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
vue3 setup中defineEmits与defineProps的使用案例详解
在父组件中定义String、Number、Boolean、Array、Object、Date、Function、Symbol这些类型的数据,使用defineEmits会返回一个方法,使用一个变量emits(变量名随意)去接收,本文给大家介绍vue3 setup中defineEmits与defineProps的使用案例,感兴趣的朋友一起看看吧2023-10-10
本篇文章主要介绍了vue中配置mint-ui报css错误问题的解决方法，非常具有实用价值，需要的朋友可以参考下2017-10-10
今天小编就为大家分享一篇浅谈v-for 和 v-if 并用时筛选条件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
今天小编就为大家分享一篇解决Vue2.0中使用less给元素添加背景图片出现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了JavaScript之实现一个简单的Vue示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
vue3使用element-plus中el-table组件报错关键字'emitsOptions'与&
这篇文章主要给大家介绍了关于vue3使用element-plus中el-table组件报错关键字'emitsOptions'与'insertBefore'的相关资料,文中将解决方法介绍的非常详细,需要的朋友可以参考下2022-10-10
在之前的前端开发中，为了实现我们的需求，通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素，得益于 Jquery 对于 DOM 元素优异的操作能力，我们可以很轻易的对获取到的 DOM 元素进行操作。这篇文章主要介绍了Vue 中 ref 的使用 ,需要的朋友可以参考下2019-04-04
Vue Router路由hash模式与history模式详细介绍
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转2022-08-08
最新评论