如题,我有一个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. python--批量修改文件夹名

    python代码如下: import os , re import os.path rootdir = r'C:\Users\Administrator\Desktop\222' # rootdir ...

  2. Luogu P4109 [HEOI2015]定价 贪心

    思路:找规律?$or$贪心. 提交:1次 题解: 发现:若可以构成$X0000$,答案绝对不会再在数字最后把$0$改成其他数: 若可以构成$XX50...0$更优. 所以左端点增加的步长是增加的($i ...

  3. Zw函数与Nt函数的分别与联系

    Ring3中的NATIVE API,和Ring0的系统调用,都有同名的Zw和Nt系列函数,一度让初学者感到迷糊.N久前的我,也是相当的迷糊.现在就以ZwOpenProcess和NtOpenProces ...

  4. HGOI 20191103am 题解

    Problem A number 使用一个$2^k$数集中每个元素的和表示数$n$,不同集合的数目有多少? 对于$100\%$的数据满足$1 \leq n \leq 10^6$ Solution : ...

  5. 在chrome开发者模式中查找你的js文件

    在chrom开发者模式中按ctrl+o查找你的js文件

  6. [python之ipython] jupyter notebook在云端服务器上开启,本地访问

    本地ssh到云端: ssh username@xxx.xxx.xxx.xxx -L127.0.0.1:7777:127.0.0.1:8888 把云端的8888端口映射到本地的7777端口 云端运行指令 ...

  7. 如何使用PHP排序key为字母+数字的数组

    你还在为如何使用PHP排序字母+数字的数组而烦恼吗? 今天有个小伙伴在群里问: 如何将一个key为字母+数字的数组按升序排序呢? 举个例子: $test = [ 'n1' => 22423, ' ...

  8. 集合家族——ArrayList

    一.概述: ArrayList 是实现 List 接口的动态数组,所谓动态就是它的大小是可变的.实现了所有可选列表操作,并允许包括 null 在内的所有元素.除了实现 List 接口外,此类还提供一些 ...

  9. Spring Cloud Eureka(一): 开篇说明及目录汇总

    开篇简述 基于Spring Boot 和 Spring Cloud 的微服务应用,本人在工作中已经使用两年有余了,伴随着个人学习计划的实施,希望借助博文的方式,将工作中使用到的技术点体系化的总结出来, ...

  10. 在docker容器中python3.5环境下使用DIGITS训练caffe模型

    ********* 此处使用的基础镜像为 nvcr.io/nvidia/digits:18.06,镜像大小为6.04GB,可从nvidia官方pull此镜像: 容器配置: CUDA:9.0 CUDNN ...