如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了。

对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断哪个子级列表需要选中,然后得到的数据再赋给Tree组件data。

或许有人问初始化数据是什么,其实就是你进到页面时Tree渲染时的data数据。比如你点击某个数据去显示这个数据下在Tree组件列表中需要勾选的数据。你点击第一次的时候勾选没问题,

但是你取消这个子级勾选然后再次选中这个子级时选中状态没改变的时候,这个时候先把初始化数据深拷贝一遍然后再去设置哪些需要数据需要选中把他们的checked改成true其他的改为false

就好了。

如图

Tree组件data深拷贝代码:

 const deepCopy = (source) => { // source就是原初始化Tree组件data数据
var sourceCopy = source instanceof Array ? [] : {};
for (var item in source) {
sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item];
}
return sourceCopy;
}

然后再遍历需要勾选的数据和初始化数据

 const getTreeList = (checkList, allList) => {// checkList为需要勾选的数据 ,allList为整个需要渲染Tree组件的初始化数据且需要深拷贝过
let list = []
allList.forEach(menu => {
for(let i = 0, len = checkList.length; i<len; i++) {
if(checkList[i].menuCode === menu.menuCode) {
menu.checked = true
break;
} else {
menu.checked = false
}
}
list.push(menu)
})
return list
}

iView中Tree组件children中动态checked选中后取消勾选再选中无效问题的更多相关文章

  1. 【Egret】中tree组件使用案例

    Egret中tree组件使用案例,包含(文本过多时,自动换行功能) 下面代码结合http://bbs.egret.com/forum.php?mod=viewthread&tid=19028& ...

  2. React组件中对子组件children进行加强

    React组件中对子组件children进行加强 问题 如何对组件的children进行加强,如:添加属性.绑定事件,而不是使用<div>{this.props.children}< ...

  3. 【技术博客】使用iview的Tree组件写一棵文件树

    本次项目的前端部分使用vue框架+iview组件构建,其中IDE的文件树部分使用了iview的Tree组件,但是Tree组件本身的接口功能极其有限,网上的相关资料也不多,在使用时费了一番功夫才摸索清楚 ...

  4. easyui Tree模拟级联勾选cascadeCheck,节点选择,父节点自动选中,节点取消,父节点自动取消选择,节点选择,所有子节点全部选择,节点取消,所有子节点全部取消勾选

    最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网 ...

  5. jquery,attr,prop,checkbox标签已有checked=checked但是不显示勾选

    最近在做项目的过程中碰到了这样的一个问题:在使用bootstrap模态框的过程中,在模态框中有一个checkbox标签,一开始是为选中的,当点击触发模态框按钮,选中chcekbox时,会显示勾选,这个 ...

  6. tree的所有节点都勾选上或者取消勾选

    还有一个功能,就是让tree的所有节点都勾选上或者取消勾选,在api中找了一下有一个方法: check target 选中指定节点. 那我们只能是选中根节点后,实现全选. getRoot none 获 ...

  7. 为何给CheckBox设置了checked属性还是没有勾选,行内样式都显示了checked

    为何给CheckBox设置了checked属性还是没有勾选,行内样式都显示了checked 正常情况下我们设置给CheckBox一个checked属性后一般都会选中 然而我今天在做案例的时候却遇到了类 ...

  8. [置顶] Flex中Tree组件无刷新删除节点

    在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...

  9. iView的tree组件实现单选功能

    iView中的树组件有复选框可以多选,但是目前还没有提供单选框的模式,不显示复选框可以提供高亮单选的模式,但是再次点击就被取消了,没有实现真正的单选: tree 的属性配置中 multiple 是否支 ...

随机推荐

  1. 前端vue的get和post请求

    vue的get和post需要两个文件vue.js和vue-resource.js 以下是实现的代码,可以参考一下,需要注意的接口的请求需要考虑跨域的问题,其次就是访问页面需要在tomcat下访问,否则 ...

  2. 浏览器事件循环机制(event loop)

    JS是单线程的 JS是单线程的,或者说只有一个主线程,也就是它一次只能执行一段代码.JS中其实是没有线程概念的,所谓的单线程也只是相对于多线程而言.JS的设计初衷就没有考虑这些,针对JS这种不具备并行 ...

  3. kubeadm进行K8S集群部署

    环境说明: 节点类型     主机名  管理ip master          master   192.168.2.10 nodes            node1    192.168.2.1 ...

  4. SchedulerFactoryBean的问题

    http://blog.csdn.net/beliefer/article/details/51578546

  5. Go之GOPATH与工作空间

    来自: GOPATH与工作空间 GOPOATH 设置 go 命令依赖一个重要的环境变量:$GOPATH 在类 Unix 环境下大概这样设置: exprt GOPATH=/home/apple/mygo ...

  6. 使用UltraISO制作linux系统安装u盘启动盘

    1.首先打开UltraISO软件,尽量下载最新版的,小编曾用某个旧版的UltraISO,制作的安装盘,不能不能识别磁盘,安装失败! 2.点击工具栏中的第二个打开镜像文件工具,如图红色方框标志按钮,然后 ...

  7. 码支付(php版本)应用

    1.下载软件 2.安装php 版本 2.打开软件,登陆支付宝 3.codepay_config.php  中填写逻辑代码 4.充值路径: 说明:$username = trim($_GET['user ...

  8. 性能测试 | 记一次生产数据库sql由451s优化为0.4s的过程

    概述 最近开发说某个接口跑的很慢,排查了下发现其中一条sql,数据量不大,但居然要跑451s,下面简单记录一下优化的过程. 问题sql SELECT l.location_gid ENUMVALUE, ...

  9. JVM内存管理 + GC垃圾回收机制

    2.JVM内存管理 JVM将内存划分为6个部分:PC寄存器(也叫程序计数器).虚拟机栈.堆.方法区.运行时常量池.本地方法栈 PC寄存器(程序计数器):用于记录当前线程运行时的位置,每一个线程都有一个 ...

  10. OpenCV、OpenCL、OpenGL、OpenMP的区别

    OpenCV        OpenCV的全称是:Open Source Computer Vision Library.OpenCV是一个开源发行的跨平台计算机视觉库,可以运行在Linux.Wind ...