Element ui tree(树)实现父节点选中时子节点不选中父节点取消时子节点自动取消功能
更新时间：2023年07月11日 10:08:41 作者：-耿瑞-
Elementui因为vue在国内的影响而受益 使用量巨大树作为一种重要的开发组件应用广泛，今天带大家了解树的灵活应用首先我们来创建一个树，对Element ui tree父节点选中时子节点不选中功能感兴趣的朋友跟随小编一起看看吧
Elementui因为vue在国内的影响而受益 使用量巨大树作为一种重要的开发组件应用广泛，今天带大家了解树的灵活应用首先我们来创建一个树
<el-tree
:data="data"
ref="tree"
show-checkbox
:check-on-click-node = "true"
node-key="perId"
:default-expanded-keys="[]"
:default-checked-keys="[]"
:indent = "10">
</el-tree>
我们会发现当你选中一个父节点时他下面的所以子节点会被全部选中
我们可以用:check-strictly强制打断父子节点的关联 (官方文档 tree有详细讲解 :check-strictly属性)当这回我们会发现:取消父节点时子节点依旧处于选中状态
这是我们可以给一个勾选事件@check-change = “checkChange”check-change事件官方文档Element ui tree有详细介绍
checkChange(a,b,c){
//如果为取消
if(b === false){
//如果当前节点有子集
if(a.children){
//循环子集将他们的选中取消
a.children.map(item => {
this.$refs.tree.setChecked(item.perId,false);
})
}
}else{
//否则(为选中状态)
//判断父节点id是否为空
if(a.perParentId !== 0){
//如果不为空则将其选中
this.$refs.tree.setChecked(a.perParentId,true);
}
}
this.tableData = this.$refs.tree.getCheckedNodes();
},setChecked方法官方文档有详细介绍
到此这篇关于Element ui tree(树)实现父节点选中时子节点不选中父节点取消时子节点自动取消功能的文章就介绍到这了,更多相关Element ui tree父节点选中时子节点不选中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍js重写alert控件的过程比较适合学习js的新手朋友,需要的朋友可以参考下2014-08-08
这篇文章主要为大家详细介绍了javascript实现简易的计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
本文主要介绍了babel基本使用。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了javascript自定义的addClass()方法，通过传参就可以实现样式的添加2014-05-05
这篇文章主要介绍了JS截取字符串的方法,结合实例形式较为详细的分析了JavaScript截取字符串的常用函数与具体使用技巧,并附带说明了JS截取字符串substr和substring方法的区别,需要的朋友可以参考下2015-11-11
JavaScript中你不知道的Object.entries用法
大家应该都知道,Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致,这篇文章主要给大家介绍了关于JavaScript中你不知道的Object.entries用法的相关资料,需要的朋友可以参考下2021-10-10
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
今天看到有个Google Code的项目，叫ZeroClipboard，大意是使用flash作为媒介，将内容复制到剪贴板。这比用纯javascript好，因为不同浏览器会出于安全的原因，有不同反应，例如IE会给出提示，有的浏览器不支持复制到剪贴板。2010-03-03
在JS中如果希望某个变量包含一个数值，那么无需限定其必须是整数或者是浮点数，下面来个例子2011-06-06
本篇文章主要是对关闭ie窗口清除Session的解决方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了JavaScript中的CSS属性及命名规范。需要的朋友可以过来参考一下，希望对大家有所帮助2013-11-11
最新评论