el-tree子级与父级不需要强关联

最新推荐文章于 2024-07-09 14:14:03 发布
最新推荐文章于 2024-07-09 14:14:03 发布
阅读量997 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35695023/article/details/114287770
版权

绝大部分我们在使用el-tree组件的时候如果需要勾选，那么子级选中的时候，父级往往也被勾选中，今天项目中遇到一个需求就是，el-tree组件子级与父级既可以关联使用，也可以不产生关联使用，其实el-tree提供了一个配置

‘check-strictly’

在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false 默认是关联的 为true的时候就不会产生关联

云怎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+elementUI实现穿梭树（el-tree的父子级（上下级）均不关联）
zhangke7758521的博客
04-27 340
穿梭树父子不关联。
【前端】el-tree的父级子级不关联
weixin_51508961的博客
05-10 690
el-tree
el-tree实现父子节点不关联，包括禁用节点，父亲节点全选，父亲节点反选和总体全选反选，可以直接拿去用
qq_58444317的博客
07-12 2183
【代码】el-tree实现父子节点不关联，包括禁用节点，父亲节点全选，父亲节点反选和总体全选反选，可以直接拿去用。
el-tree重写勾选逻辑，实现父子节点勾选不互相关联，选中父级自动勾选子集，选中子集不勾选父级
丶扁扁的糖是扁的 的博客
04-19 2966
<el-tree ref="leftTree" :check-strictly="true" @check-change="checkChange" /> /** * @description: 重写勾选逻辑 * @param node 选中的数据 * @param checked 是否选中 * @return void */ checkChange(node, checked) { //全部取消/选择 const setChecked = (arr, i...
element-ui树形组件实现父级与子级关联，子级与父级不关联
lichaoqun678的博客
11-15 4176
欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图.
el-tree 踩过最深的坑，没有之一。设置与上级严格关联、下级不严格关联，CV即用
AC_Surprise的博客
01-12 1631
先看需求 重点：当你点击勾选复选框时候，若点击父节点，其上下子节点全部统一跟随父节点变化；若点击子节点，子节点部分勾选时父节点处于全选状态，子节点全部勾选时父节点选中，子节点全部不勾选时父节点还是选中状态。 效果 图是扒下来的，意思一样，实现效果一样（不会制作gif图 o(╥﹏╥)o） 实现逻辑 这个功能在官方文档上是没有直接呈现的，需要我们自己去对代码进行理解然后编写。 首先要用到官方文档提供的方法与事件： 第一步 我们需要设置 check-strictly 属性，目的是为了打破父子相互关联的做法，
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-tree-selected-tree
11-15
在实现`el-tree-selected-tree`时，我们需要监听`el-tree`的`'check-change'`事件，这个事件在节点被选中或取消选中时触发，我们可以获取到当前选中状态和节点信息。通过维护一个`selectedNodes`数组，我们可以记录...
ElementUI中el-tree节点的操作的实现
10-15
在ElementUI中，`el-tree`组件用于展示树形数据，它提供了丰富的功能，包括节点的增删改查。在本教程中，我们将探讨如何实现`el-tree`节点的各种操作，包括获取选中节点的ID、添加节点、修改节点以及删除节点。 ...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
2. **刷新节点状态**：为了让`el-tree`组件知道有新节点需要加载，我们需要设置节点的`loaded`属性为`false`，表示该节点的数据未加载。接着，通过调用`node.expand()`方法，触发节点的加载请求，从而更新视图。 ``...
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
"el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件"是一个自定义的前端UI组件，它结合了Element UI库中的el-select和el-tree两个组件的功能，创建了一个适用于数据层级关系展示的选择器。...
el-tree实现多选、父子节点不关联、禁选
weixin_58347102的博客
09-01 2096
4、将勾选的节点，按父子层级拼接name回显页面（如勾选了二级，需将一级name拿到并拼接起来：一级/二级）5、回显页面的name可删除，删除的同时需同步更新菜单树勾选状态，禁选状态。3、最多可勾选3条，大于3其余复选框禁选。2、父子节点不关联，互不影响。
el-tree手动半选 父子节点不关联实现方案
weixin_59685936的博客
11-22 1786
el-tree手动半选 父子节点不关联实现方案
el-tree 设置与上级严格关联、下级不严格关联
q1ngqingsky的博客
05-21 1609
element-ui el-tree 设置与上级严格关联、下级不严格关联 点击查看原文章 应用场景： 动态路由权限配置，菜单和按钮在一颗树内显示，要求按钮可以不被勾选（按钮一定为叶子节点），即叶子节点可以不严格关联 此时我们的tree需要设置node-key、check-strictly为true, 实现逻辑 监听tree的check事件和treesetChecked方法tips：tree的数据（data）每级需要有上级的父节点id字段 实现方法 1.组建设置，如果返...
element ui的el-tree多选树(复选框)父子节点关联不关联的问题
热门推荐
Beam
02-21 3万+
属性check-strictly 官方文档提供属性check-strictly，在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。 而此属性的意思是： 默认false，父子关联。有如下现象及问题： 1、当你通过函数设置勾选节点的时候，只要父节点被勾选子节点必会勾选上，即便设置勾选的list中无此子节点。 2、当你点击勾选复选框时候，若点击父节点，其下子节点全部统一跟随父...
el-tree：实现父节点自动关联选中、子节点自动关联取消选中功能
java web
07-19 4463
利用element plus的el-tree控件，实现选中节点时，其各级父节点自动关联选中；取消选中该节点时，其各级子节点自动关联取消选中功能
在vue3中，手写父子关联，勾选子级父级关联，取消只取消当前子级，父节点不动
最新发布
qq_35452726的博客
07-09 488
在vue3中，手写el-tree父子关联，勾选子级父级关联，取消只取消当前子级，父节点不动
vue树状图el-tree父节点选择联动子节点，子节点选中不影响父节点
lyy521yibeizi的博客
03-23 2426
父节点选中时，选中所有子节点，父节点取消时，取消所有子节点，子节点选中不影响父节点
vue3+el-tree实现权限分配反显
weixin_64840387的博客
03-07 367
解决方案：从以上代码，我们可以看到要想实现父子节点不关联，这时候我们就需要用到el-tree组件的check-strictly属性，点击节点的时候需要父子关联传入父节点的id，check-strictly就需要动态设置了。1.渲染未实时更新问题。比如说选中和反显数据的问题，在这里我就遇到了。首先我的接口数据返回是正常的，第一次选中是正常的，再次选中一个公司获取对应权限就发生了错乱，直接把全部的都给选中了。解决方案：用v-if来渲染，默认为true，用定时器让他在切换公司名称的时候自动刷新获取到最新的数据。
el-cascader子级反选父级
07-28
你可以使用 `changeOnSelect` 属性来实现 el-cascader 子级反选父级的功能。将 `change-on-select` 设置为 `true`，当选择子级节点时，父级节点也会被自动选中。 以下是一个示例代码： ```html <el-cascader :...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值