解决elementtree树形组件回显数据问题

更新时间:2023-06-20 22:47:30 阅读: 评论:0

解决elementtree树形组件回显数据问题
解决vue+element tree组件回显数据时有⼀个⽗节点数据下⾯⼦节点就都会被选中
1.当el-tree 从后台拿到数据动态回显展⽰出来时,只要有⼀个⽗节点,则下⾯的所有⼦节点全部被勾选了
如图所⽰:
后台返回的回显数据只有33(⽗节点组织管理)45(⼦节点个⼈管理),但是组织管理下的所有⼦节点都被回显选中。
有趣对联2.解决⽅法代码如下
先在组件上绑定check-strictly属性
白头发增多怎么办check-strictly属性控制是否严格的遵循⽗⼦不互相关联的做法,默认为 fal
具体参考element官⽹api。
代码如下(⽰例):
<el-tree :data="menuList"莫斯科旅游攻略
:props="menuListTreeProps"
node-key="menuId"
ref="menuListTree"
:check-strictly="isCheck"
show-checkbox>
小孩叛逆期
</el-tree>
export default{
data(){
isCheck: fal,
}
}
//js操作
//⾸先先拿到后台返回需要回显的id数组假如是showData数组
//第⼀步先设置 check-strictly绑定的属性为true 为了是解除⽗⼦节点的关联(意思就是点击勾选⽗节点的时候下边的所有⼦节点都不会选中。)
//第⼆步设置回显使⽤element Api的tCheckedKeys(showData)⽅法进⾏设置
//最后回显成功之后通过$nextTick异步⽅法再把check-strictly绑定的属性值设置为fal。(⼀定要有这步操作,不设置的话,勾选⽗节点⼦节点不会被勾选中)//具体代码如下 :
捆绑老师this.isCheck= true //重点:回显之前⼀定要设置为true
this.$nextTick(()=>{
this.$uListTree.tCheckedKeys(这⾥写接⼝获取的数据)//给树节点赋值回显
this.isCheck= fal //重点:赋值完成后设置为fal
鸡蛋面汤})天祝白牦牛
这样问题就解决了。
总结旅游批发商
总⽽⾔之需要多了解element提供的api⽅法以及属性的作⽤,希望⼩编的代码能帮助到你,欢迎⼤佬们提出纠正。

本文发布于:2023-06-20 22:47:30,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/1001578.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:节点   回显   数据   设置   勾选
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图