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


Posted in Javascript onAugust 14, 2022

解决vue+element tree组件 回显数据时有一个父节点数据下面子节点就都会被选中

1.当el-tree 从后台拿到数据动态回显展示出来时,只要有一个父节点,则下面的所有子节点全部被勾选了

如图所示:

element 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树形组件回显内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
vue的mixins属性详解
Mar 14 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
react antd实现动态增减表单
Jun 03 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 #Vue.js
JavaScript实现音乐播放器
vue el-table实现递归嵌套的示例代码
Aug 14 #Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 #Vue.js
输入框跟随文字内容适配宽实现示例
Aug 14 #Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 #Javascript
JS实现页面炫酷的时钟特效示例
You might like
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
python实现井字棋小游戏
2020/03/04 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
《维生素c的故事》教学反思
2014/02/18 职场文书
境外导游求职信
2014/02/27 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
门市房租房协议书
2014/12/04 职场文书
三下乡个人总结
2015/03/04 职场文书
教师培训学习心得体会
2016/01/21 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
分享几个简单MySQL优化小妙招
2022/03/31 MySQL