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 相关文章推荐
javascript prototype原型操作笔记
Dec 07 Javascript
javascript学习之闭包分析
Dec 02 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
js只执行1次的函数示例
Jul 20 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
vue引入静态js文件的方法
Jun 20 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的静态成员函数效率更高的原因
2014/06/13 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
微信红包随机生成算法php版
2016/07/21 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
python正则分组的应用
2013/11/10 Python
Python3基础之函数用法
2014/08/13 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Django的信号机制详解
2017/05/05 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
Python中常见的数制转换有哪些
2020/05/27 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
运动会演讲稿
2014/05/07 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python