el-tree父子联动属性设置失效

最新推荐文章于 2025-04-24 09:00:00 发布

浩茫

最新推荐文章于 2025-04-24 09:00:00 发布

阅读量512

点赞数 3

文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/TGYAO/article/details/136670139

版权

在这里插入图片描述

如果 el-tree 位于一个 el-form 内，则check-stricty 属性应当是 el-form绑定的属性的子属性，就是form对象内的元素，且应当在return data 中就已经定义，不能在方法中定义form中check的值

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

浩茫

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

开发需求16-修改el-tree组件的父子关联关系，选中子节点后向上选中所有父节点，不选中下面的子节点；选中父节点，只选中当前节点

Mr_LiuP的博客

04-13

1626

修改el-tree组件的父子关联关系，选中子节点后向上选中所有父节点，选中父节点只选中当前节点，不选中下面的子节点

javascript-TreeView父子联动效果保持节点状态一致

12-11

在实际应用中，有时我们需要实现一种父子联动的效果，即选中一个节点时，其所有子节点都被选中；反之，取消选中一个节点时，其所有子节点也被取消选中，以保持节点状态的一致性。这种功能在权限分配等场景中尤其有用...

1 条评论您还未登录，请先登录后发表或查看评论

vue3+element-plus权限控制实现(el-tree父子级不关联情况处理)

Bruce__taotao的博客

09-14

2601

在开发后台管理系统的时候，用户的权限控制是一个常见的需求。这里需要探讨下按钮的级别的权限控制，以及实现中使用element-plus tree 组件的使用细节。后台管理系统常见的权限控制需求，这里讲button实现交互细节处理，取消选中子级menu/button，父级不关联取消；选中/取消父级catalog/menu，子级全部选中/取消；选中/取消部分子级menu/button，父级关联半选中状态（indeterminate=true）；

asp.net1.1下权限配置系统从设计到实现(二)

weixin_33918357的博客

06-08

100

此权限系统的涉及到的数据表结构如下：很简单，有图在此一目了然。一个角色对应多个功能，而每个功能又包含很多子功能，所以在设计的时候考虑要用到这5张表。在进行开发之前需要安装和配置TreeView控件，如果不知道怎么用可以参看这里：http://jigee.cnblogs.com/archive/2006/04/14/375623.html；应为实现这样的系统主要问题是解决TreeVi...

element ui的el-tree多选树(复选框)父子节点关联不关联的问题，选中当前节点，他的子节点和父节点是否被选中，非常详细

sunrj_niu的博客

06-17

1万+

element ui的el-tree多选树(复选框)父子节点关联不关联的问题，选中当前节点，他的子节点和父节点是否被选中，非常详细属性check-strictly 官方文档提供属性check-strictly，在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。而此属性的意思是： **默认false，父子关联。**有如下现象及问题： 1、当你通过函数设置勾选节点的时候，只要父节点被勾选子节点必会勾选上，即便设置勾选的list中无此子节点。 2、当你点击勾选复选框时候，若点击父节

element ui的el-tree多选树(复选框)父子节点关联不关联的问题

热门推荐

Beam

02-21

3万+

属性check-strictly 官方文档提供属性check-strictly，在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。而此属性的意思是：默认false，父子关联。有如下现象及问题： 1、当你通过函数设置勾选节点的时候，只要父节点被勾选子节点必会勾选上，即便设置勾选的list中无此子节点。 2、当你点击勾选复选框时候，若点击父节点，其下子节点全部统一跟随父...

element-plus:el-tree-select加了check-strictly、check-on-click-node后无法点击复选框，只能点击文字才能选择

furfur-jiang的博客

02-22

2350

element-plus:el-tree-select加了check-strictly、check-on-click-node后无法点击复选框，只能点击文字才能选择。应该是bug，排除后发现el-form下就会导致这样的情况，所以要自己在form外面进行处理。测试版本：element-plus2.2.2， vue3.2.31。

el-tree全选，父子联动，展开折叠，以及多选和默认选中

liluo_1227的博客

07-12

3498

html部分 <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')" >展开/折叠</el-checkbox > <el-checkbox v-model="menuNodeAll" @ch

el-tree-selected-tree

11-15

`el-tree`通过`data`属性接收一个包含树结构的数据数组，每个对象包含`label`（节点文本）、`children`（子节点数组）和其他自定义属性。我们可以利用`props`属性来指定各个属性的映射，例如`label`对应节点的显示...

【JavaScript源代码】element的el-tree多选树(复选框)父子节点关联不关联.docx

12-28

在JavaScript的前端开发中，Element UI 是一个...总的来说，el-tree的`check-strictly`属性是控制父子节点关联性的重要开关，开发者需要根据实际需求来灵活运用，并结合其他属性和事件处理器来实现自定义的交互逻辑。

在element-ui的el-tree组件中用render函数生成el-button的实例代码

10-17

el-tree组件通过data属性来传递树形数据，并通过props属性来定义树节点的各个属性名，如children表示子节点数组，label表示节点显示的文本等。为了控制树形控件的表现，还可以通过show-checkbox属性添加复选框，node...

vue el-tree 默认展开第一个节点的实现代码

10-15

4. default-expanded-keys属性：为了实现默认展开特定节点，可以通过设置el-tree组件的default-expanded-keys属性来实现。该属性可以绑定一个数组，数组中的元素对应需要展开的节点的id值。 5. 实例化与数据绑定：...

vue el-tree树形结构的check-strictly属性

且听风吟的博客

08-19

2万+

Tree 树形控件

Element-UI 树形控件，报错Syntax Error: Unexpected token (108:10)＜span＞标签报错（已解决）

风不知从何处起的小屋

04-09

765

官方文档地址这里给出具体的报错截图问题解决：这是因为树形控件需要jsx语法支持，需要安装vue中的jsx的插件transform-vue-jsx才支持jsx的写法安装相关依赖到生产环境中（-S / --save 将依赖添加到生产环境中） npm install babel-plugin-transform-vue-jsx -S npm install babel-helper-vue-jsx-merge-props -S npm install babel-plugin-syntax-jsx -

Vue check-strictly=“true“ 报错

weixin_43754284的博客

04-04

2215

vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "checkStrictly". Expected Boolean, got String with value "true".

采坑之element-ui tree组件

axibadexiang的博客

12-12

633

项目中，我在做权限角色管理这一块用到了树形组件，element-ui的。踩了一下坑。。场景是这样的. 我新建一个角色给给角色配置相应的菜单。每一个菜单都有对应的id。选了的就要传给后台，但是element-ui这个tree组件是这样的机制，当子集没有全选时父级id是不会选中的，只有子集是全选状态父id才是选中的。所以这个就要改源码，后台是需要子集的父级id的。但是又有一个坑就是我选了一个父级...

Vue组件化开发中父子组件间传值与联动

weixin_55181759的博客

09-02

961

组件化开发父子组件访问children/refsparent/rootslot的使用基本使用具名插槽编译的作用域作用域插槽父子组件访问 children/refs parent/root slot的使用基本使用具名插槽编译的作用域作用域插槽

element-ui tree组件 return span 标签报错

06-05

556

原因： webpack无法解析vue-jsx的语法问题解决方案（1）.安装依赖 [babel-plugin-transform-vue-jsx][1] npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-...

Vue3+Vite+TypeScript+Element Plus开发-23.客制Form组件

最新发布

sen_shan的专栏

04-24

2046

在实际项目开发中，表单（Form）的数据编辑功能是常见需求。为了提高开发效率，本章节将重点介绍如何对表单组件进行封装，从而实现快速开发。

el-tree setcheckedkeys不选中

03-14

### el-tree 中 `setCheckedKeys` 方法未正确选中节点的原因分析在 Vue 的 Element UI 或者 Element Plus 库中的 `el-tree` 组件，`setCheckedKeys` 是用于设置树形结构中哪些节点被选中的方法。如果该方法未能正常工作，可能由以下几个原因引起： #### 原因一：属性绑定错误确保 `el-tree` 组件是否正确绑定了 `:default-checked-keys` 属性，并且指向了一个有效的变量。例如，应该使用如下语法[^2]： ```vue <el-tree :default-checked-keys="checkedKey"></el-tree> ``` 如果没有正确绑定此属性或者绑定的变量为空，则可能导致 `setCheckedKeys` 方法无法找到对应的键值。 --- #### 原因二：异步数据加载问题当 `el-tree` 使用懒加载 (`lazy`) 时，只有已经加载的数据才会被应用到 `setCheckedKeys` 方法上。因此，如果某些节点尚未加载完成，这些节点的状态不会被更新[^3]。可以通过监听数据加载完成后调用 `setCheckedKeys` 来解决问题。 --- #### 原因三：父子节点关联影响默认情况下，`el-tree` 的 `check-strictly` 属性为 `false`，这意味着父节点和子节点之间存在联动关系——即选中某个父节点会自动选中其所有子节点，反之亦然。这种行为可能会干扰手动调用 `setCheckedKeys` 的效果[^4]。为了实现更精确的选择控制，可以将 `check-strictly` 设置为 `true`。 --- #### 解决方案以下是几种常见的解决方案及其适用场景： 1. **重新初始化并延迟执行** 如果发现 `setCheckedKeys` 调用过早而导致失效，可以在 DOM 更新后再尝试操作。例如，在 `$nextTick` 中调用： ```javascript this.$nextTick(() => { this.$refs.tree.setCheckedKeys([1, 2, 3]); // 替换为目标 key 数组 }); ``` 2. **逐个设置选中状态** 对于复杂的场景，可以直接遍历目标 keys 并逐一调用 `setChecked` 方法来替代整体设置： ```javascript res.checkedKeys.forEach(value => { this.$refs.tree.setChecked(value, true); }); ``` 这种方式尤其适用于需要绕开父子节点联动逻辑的情况。 3. **禁用父子节点联动** 若希望完全独立地管理每个节点的选中状态而不受其他节点的影响，可启用严格模式： ```vue <el-tree check-strictly></el-tree> ``` 4. **处理懒加载情况下的特殊需求** 当面对懒加载时，需等待对应分支全部加载完毕再进行选中操作。可通过自定义事件或定时器机制触发后续动作： ```javascript setTimeout(() => { this.$refs.tree.setChecked(node.key, true); }, 0); ``` --- ### 总结上述提到的各种可能性均可能是造成 `setCheckedKeys` 失效的因素之一。具体实施哪种策略取决于实际项目环境以及业务需求。务必确认基础配置无误之后再考虑优化细节部分。