如题,我有一个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. Connect AS400 through firewall(JDBC will require ports: 449, 8470, 8471, and 8476)

    What TCP ports are used by ODBC to connect to the DB2/400?  8471/9471 http://search400.techtarget.co ...

  2. Crash的数字表格 / JZPTAB

    https://www.cnblogs.com/peng-ym/p/8666124.html #include<bits/stdc++.h> #define LL long long #d ...

  3. 【线性代数】2-5:逆(Inverse)

    title: [线性代数]2-5:逆(Inverse) toc: true categories: Mathematic Linear Algebra date: 2017-09-11 20:00:1 ...

  4. 【线性代数】1-0:向量(Vector)

    title: [线性代数]1-0:向量(Vector) toc: true categories: Mathematic Linear Algebra date: 2017-08-28 10:01:2 ...

  5. 通过python的urllib.request库来爬取一只猫

    我们实验的网站很简单,就是一个关于猫的图片的网站:http://placekitten.com 代码如下: import urllib.request respond = urllib.request ...

  6. Vue 使用百度地图组件

    npm 安装 npm install vue-baidu-map --save组件官网地址 https://dafrok.github.io/vue-baidu-map/#/

  7. gitlab使用指南

    gitlab是公司内部搭建的用于管理代码项目的类似于github的系统. 登录注册 注册时使用的名称和邮箱请按照公司内部格式进行信息填写. 在注册完成以后有可能会向邮箱里发送一个注册邮件,如果要求发送 ...

  8. shell 里的正则

    #!/bin/bash variable="This is a fine mess." echo "$variable" # Regex matching wi ...

  9. 20.包含min函数的栈 Java

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 思路 借助辅助栈实现: 压栈时:若辅助栈为空,则将节点压入辅助栈.否则,当当前节点小于 ...

  10. 如何使用SendGrid发送邮件

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...