el-tree组件使用@check-change、current-change、node-expand、node-click时执行顺序问题

最新推荐文章于 2024-08-15 15:04:44 发布
最新推荐文章于 2024-08-15 15:04:44 发布
阅读量7.5k 收藏 9
点赞数 2
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenxi_li/article/details/118549136
版权

官方文档解释如下：
在这里插入图片描述
经debugger实验，先执行current-change、node-expand（假如节点展开）、node-click，最后执行check-change，check-change是检查节点发生变化时调用，比节点自身变化要慢
在这里插入图片描述
在这里插入图片描述

Silence-Lee
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目里设置el-tree默认选中的背景色和字体色以及鼠标悬停的背景色
qq_37635012的博客
02-13 7095
【代码】Vue项目里设置el-tree默认选中的背景色和字体色。
el-tree控制权限问题
weixin_44986077的博客
01-12 676
最近在做后台管理系统权限问题是肯定会遇到的，下面我来分享下我用el-tree的心得，我们的需求是需要以数组的形式传递，二级菜单对应的三级菜单在一个对象中，如果有多个就一个数组中多个对象，传递的形式 [{"menuTwoId":"20001","queryHandle":true,"searchHandle":true,"partnerData":true},{"menuTwoId":"20003","queryHandle":true,"addHandle":true}] 下面先看代码 <el-di
el-tree 父组件数据双向绑定更新、on-check、check-change
m0_37684037的博客
02-23 1420
<template> <div> <div> <el-input placeholder="Search" size="small" v-model="filterText" clearable @keyup.enter.native="onSearch" @clear="onSearch" ></el-input&g...
el-tree check-strictly为false实现选择和取消选择一个节点时，子节点跟着选中和取消
Hay-Zero的博客
06-15 6290
先看具体实现效果 核心：绑定check事件和设置check-strictly为true，当点击某个节点时判断是勾选还是取消勾选；找到子节点和已勾选的节点，如果是勾选用concat合并再用set去重，如果是取消勾选在已勾选的节点中去掉子节点，最后用setCheckedKeys或者setCheckedNodes设置 <el-tree :data="apiScopeGrantList" show-checkbox node-key="id" ref="treeApiScop
el-tree 获取当前勾选节点的选中状态以及选中值对象 触发check-change多次事件问题原因
m0_65607651的博客
07-08 1098
el-tree 获取当前勾选节点的选中状态以及选中值对象 触发check-change多次事件问题原因 隐藏第一层或最后一层节点的勾选框
el-tree checkbox
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
10-17 994
expand（假如节点展开）、node-click，最后执行check-change，check-change是检查节点发生变化时调用，比节点自身变化要慢。el-tree组件使用时执行顺序依次为@current-change、@node-expand、@node-click、@check-change时。经debugger实验，先执行current-change、
Element-plus el-tree 触发check-change多次事件
weixin_59015876的博客
01-11 2149
再者，就是直接选择复选框的话，复选框假如是全选的状态的话，点击树节点的父节点的话，会改变子节点所有的选择，则会触发节点数数量+1（父节点）的check-change次数。简单来说，就是当你触发了子节点的复选框，如果复选框为全选的状态，因为你的一次触发，导致变为半选的状态，导致会在触发一次父节点的复选框check-change。反之，假如树节点的复选框是没有选择的状态，由于选择了子节点后，变成了半选的状态，又会触发一次check-change。通过以上的官网的解释我们可以发现二者的不同。
使用element-ui的el-tree组件查询节点父节点(node-click)
u012394336的博客
04-22 6508
一、前端页面 <template> <div> <el-row > <!-- 查询工具栏--> <el-col > <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> </el-col> </el-row>
el-tree lazy 使用 default-checked-keys 确定check 子项仅有连续n项为check时，根级会变为check，导致其子项全部变为check
海胆的博客
09-10 791
问题定位 el-tree 在使用 lazy 模式时，当提供的 default-checked-keys 数组 开始仅包含 从第一个子节点开始 连续的（>= 2）check key 时， 就会造成 父级 设置成 check , 最终导致 所有子级都被选中 default-checked-keys 数组的值是通过 懒加载获得的 问题原因 可能跟 el-tree 的底层渲染 方式有关 解决方法 尝试在首部添加一个不可见的节点， 且不说行不行，父级会出现半选 百度的方案 checkStrictly太复杂了
el-select下拉框内展示el-tree结构
qq_45110882的博客
07-19 2069
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Vue组件(一) - 二次封装ElementUI实现tree树形组件
HUMM
05-31 2024
文章目录功能描述代码base-tree.vue:treeDemo.vue: 功能描述 基础功能同el-tree 代码 base-tree.vue: <!-- * @Description: 公共树组件 * @Author: HMM * @Date: 2021-01-11 16:23:23 * @FilePath: base-tree.vue 变量： expandNode：是否展开所有节点 isShowFilter: 是否需要节点过滤 treeProps: 树形结构配置项 事件： @h
Element-ui tree懒加载时获取节点DOM
weixin_44368212的博客
01-04 2531
tree提供的方法貌似没有可以直接获取节点DOM，或者点击勾选节点响应函数参数node其实只是传入data的数据对象，拿不到DOM，得想想法子来获取之 事情是这样的：最近做一个表单，要能勾选一个二级的下拉数据，于是就想起了element的tree组件，而且二级的数据是要调用接口懒加载展开的，这个应该很多人会遇到这种需求，tree组件即支持勾选框又支持懒加载节点，功能是够用的。 所以起初我是这样...
element-ui el-tree组件获取当前选择所有选中（check）和半选中（indeterminate）的节点
我总是词不达意的博客
10-07 5252
element-ui el-tree组件获取当前选择所有选中和半选中的节点
使用element el-tree组件的@check-change函数和setChecked函数出现的问题
weixin_55034383的博客
08-13 6115
使用element el-tree组件的@check-change函数和setChecked函数出现的问题
el-tree 点击输出当前选中 @node-click=“getCheckedNodes“
m0_49789433的博客
12-24 5887
<el-tree :data="allDepartments" //数据 default-expand-all //是否全部展开 node-key="id" ref="tree" highlight-current class="filter-tree" :props="defaultProps" //规则 ...
el-tree组件node-click 时获取父节点、子节点
m0_57730492的博客
08-08 1515
【代码】el-tree组件node-click 时获取父节点、子节点。
使用自定义的函数触发 el-tree 节点的 nodeClick 达到跳转目的
hold_on_的博客
09-17 4739
场景介绍：1.目前界面左边有一个树形的展示数据，其中包含分组和成员，分组包含成员 2.点击分组右边会出现其下所有的成员，成员后可有查看按钮，点击可查看成员详细信息 3.在跳转到成员信息的界面时，同时需要树形图节点状态进行改变，类似于一种双向绑定 思路： 使用 current-node-key 和当前节点的 key 绑定，然后通过 watch 对 节点 key 进行监听，一旦 key 发生变化，watch 中的 nodeKey 便会...
el-tree勾选自动展开子节点并触发@check-change事件
最新发布
kyh419的博客
08-15 234
在el-tree里使用复选框的时候，当节点没有被展开时，点击复选框只会触发当前点击节点的@check-change事件，但是业务需求是需要点击节点时，能够展开所有子节点并且全部都触发@check-change事件。遇到的问题是，本来想在点击复选框的时候，获取到node, 通过node.expaned = true来实现节点展开，节点是展开了，但是不会再次去触发check-change事件了，达不到想要的效果。这样就可以保证既可以展开节点，也能触发选中事件！
树el-tree获取check选中的数据
qq_45018844的博客
06-04 5129
效果 首先通过el-col进行对页面的划分 <el-tree :props="props" :load="loadNode" lazy accordion check-strictly="false" @check-change = "setCheckedNodes" :default-expanded-keys= '[1]'
el-tree，设置expand-on-click-node = false，如何使点击箭头图标时，触发node-click
07-14
您可以使用 `@click` 事件监听箭头图标的点击，然后在事件处理程序中触发 `node-click` 事件。具体的代码示例如下： ```html <el-tree :data="treeData" :expand-on-click-node="false" @node-click="handleNodeClick" > <span slot-scope="{ node, data }"> <span v-if="node.isLeaf" class="el-tree-node__expand-icon"> <i class="el-icon-arrow-right" @click="triggerNodeClick(node, data)"></i> </span> </span> </el-tree> ``` ```javascript methods: { handleNodeClick(nodeData) { // 处理节点点击事件的逻辑 console.log('Node clicked:', nodeData); }, triggerNodeClick(node, data) { // 触发 node-click 事件 this.$emit('node-click', node, data); } } ``` 在上面的代码中，我们在箭头图标上添加了 `@click` 事件监听，并调用 `triggerNodeClick` 方法来触发 `node-click` 事件。这样，当点击箭头图标时，会触发 `node-click` 事件，并执行 `handleNodeClick` 方法来处理节点点击的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值