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实现基于拖拽改变物体大小的方法,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-01-01
JavaScript使用HTML5的window.postMessage实现跨域通信例子
这篇文章主要介绍了JavaScript使用HTML5的window.postMessage实现跨域通信例子,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了textarea焦点的用法实现获取焦点清空失去焦点提示效果,需要的朋友可以参考下2014-05-05
今天小编就为大家分享一篇对Layer UI 模块化的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了js实现图片放大并跟随鼠标移动特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
这篇文章主要为大家详细介绍了如何利用HTML+CSS+JS实现中国象棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家详细介绍了JavaScript循环的相关资料，JavaScript的两种循环方式，一种是for循环，另while一种是循环具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
关于javascript中json 对象数组之间相互转化问题
这篇文章主要介绍了关于javascript中json 对象数组之间相互转化问题,在实际应用中，JSON对象和数组的结构可能更加复杂，需要根据具体情况进行相应的处理和转换，需要的朋友可以参考下2023-07-07
Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息2023-04-04
这篇文章主要为大家详细介绍了原生JS实现数码表特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论