element plus tree组件 check-change 和 check属性的区别

原创 已于 2022-11-18 16:04:38 修改 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue3

于 2022-11-18 15:56:43 首次发布
本文探讨了两个属性在设置时的不同行为。通过实测发现，其中一个属性在设置时会触发 check-change 事件，但不会触发 check 事件。这对于理解属性间细微差别及事件机制非常重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、如文档中写明的，参数不同

2、文档中对这两个属性的说明很难区分，经测试，发现这两个属性有一个区别，设置default-checked-keys的时候会触发 check-change 但不会触发check。

vue3 Element-Plus封装的el-tree-select的使用
宁波阿成的博客
03-25 4080
vue3 Element-Plus封装的el-tree-select的使用
vue3 - element-plus树形控件el-tree快捷全选、反选、清除选择功能，Tree树形控件组件实现点击按钮一键全勾选和一键全取消勾选快捷按钮（详细示例运行源码，一键复制开箱即用！）
高级前端工程师
03-11 5581
vue3，element plus，el-select，树形组件，Tree树形控件，vue3 elementplus如何实现tree树组件一键全选和反选功能，el-select实现全选、取消全选效果，树形下拉选择器组件，element-plus tree树形全选和反选，el-tree实现一键全选、反选功能el-tree 全选，el-tree实现全选/全不选，tree全选全不选,获取所有选中，清空el-tree复选框选中项，el-select下拉框多选实现全选的实现，一键全选多个树形，el-tree树增加全选
Vue3 + Element-plus Tree 组件的 @check 事件使用方案
TianXuab的博客
08-09 2656
请根据你的实际需求进行逻辑处理。这只是一个简单的示例，你可以根据实际情况来设计你的 Tree 组件和处理方法。在这个示例中，我们使用了 Vue 3 的 Composition API，通过。属性来设置节点的唯一标识（这里使用了一个函数返回节点的 id）。在 Vue 3 中使用 ElementUI 的 Tree 组件的。事件来处理节点选中状态的变化。以下是在 Vue 3 中如何使用。与 Vue 2 不同的是，Vue 3 使用。与 Vue 2 相似，我们在。函数来设置组件的逻辑。方法来处理选中状态的变化。
Element-plus el-tree 触发check-change多次事件
weixin_59015876的博客
01-11 4231
再者，就是直接选择复选框的话，复选框假如是全选的状态的话，点击树节点的父节点的话，会改变子节点所有的选择，则会触发节点数数量+1（父节点）的check-change次数。简单来说，就是当你触发了子节点的复选框，如果复选框为全选的状态，因为你的一次触发，导致变为半选的状态，导致会在触发一次父节点的复选框check-change。反之，假如树节点的复选框是没有选择的状态，由于选择了子节点后，变成了半选的状态，又会触发一次check-change。通过以上的官网的解释我们可以发现二者的不同。
element-plus el-tree setCheckedKeys触发check-change事件
hafhcfgjb的博客
11-13 3218
el-tree 显示复选框，父子不互相关联，点击父节点需要setCheckedKeys选中第一级子节点，会调用check-change事件，从而导致孙子节点也会被选中，不符合预期。
element-ui el-tree check-change和check的坑(调用多次)
joan_FontEnd的博客
07-29 3297
el-tree 数据调用多次
el-tree组件使用@check-change、current-change、node-expand、node-click时执行顺序问题
Silence-Lee的博客
07-07 8227
官方文档解释如下： 经debugger实验，先执行current-change、node-expand（假如节点展开）、node-click，最后执行check-change，check-change是检查节点发生变化时调用，比节点自身变化要慢
使用element el-tree组件的@check-change函数和setChecked函数出现的问题
weixin_55034383的博客
08-13 6753
使用element el-tree组件的@check-change函数和setChecked函数出现的问题
element ui tree的@check-change方法
freecharges的博客
03-19 9583
element ui tree的@check-change方法 this.refs.treeGasRef.getCheckedNodes()这个意思是获取选中对应框的在值，点击选框后激活@check——change方法，传入this.refs.treeGasRef.getCheckedNodes() 这个意思是获取选中对应框的在值，点击选框后激活@check——change方法，传入this.re...
element UI 使用 el-tree 多次进行不同条件查询时，渲染不同dom节点时，缓存数据。（@check-change的小众使用方法）
weixin_44156365的博客
05-21 1597
文章目录功能要求第一次的分析思路（失败的逻辑）第二次的逻辑思路（可以直接看这里）代码1.html代码和一些属性解释2.单个勾选操作的代码 功能要求 点击按钮后，弹框显示可勾选的人员，一级节点为班级，二级节点为班级内的人员。同时提供 条件搜索 ，搜索后显示符合条件的可勾选人员。勾选操作都是在一个弹框页面进行的，等用户 多次搜索选定所有人员 后，点击确定按钮，点击提交将数据传给后端。 第一次的分析思路（失败的逻辑） 可能大家的第一反应都是用el-tree自带的 check-change 或者 node-clic
新手小白记录elementUI tree组件对节点增删改
ismmc的博客
09-23 679
效果： 对tree组件封装成treeComponent 组件，内容如下，从项目中选取 <el-tree ref="tree" v-loading="loading" :data="treeData" v-bind="treeProps" :show-checkbox="showCheckbox" @check="onCheck" @current-change="onCurrentChange" &gt..
vue2/3 - element组件库el-tree树形控件实现一键全选/一键反选取消/全部收起/全部折叠/上下级父子是否联动功能，vue+element Tree树点击按钮全选和反选，收起折叠树结构
高级前端工程师
03-20 3610
vue2，vue3，elementUI，element plus，Tree树形控件，el-tree，el-tree实现多选、反选，tree组件展开/折叠及全选/分组全选实现，element的树表格和树形控件折叠展开方法，element tree 如何全部展开、全部折叠，elmentui中树结构el-tree 多选功能，element el-tree折叠收缩，el-tree实现一键全选、反选功能，element Tree 树形控件 折叠、展开 全选、清空，树形结构全选、取消全选，展开收起，element中Tr
element plus tree树形复选框
weixin_40412060的博客
09-05 1964
1.勾选子节点勾选其对应的父节点。
Vue3+Element-Plus中的Tree组件，多选时的赋值与取值
一念的博客
03-02 5123
el-tree 是 element-ui 提供的一个树形组件，可以在 Vue.js 应用中使用。el-tree 组件提供了 getCheckedNodes 方法，可以用来获取树形结构中被选中的节点。
修改element-ui中tree的checkbox（隐藏指定节点checkbox）
Kimser
09-02 6583
在使用element-ui中tree的checkbox时，有时需要根据节点的属性来决定是否在节点前显示checkbox选择框，因此需要对element-ui的源码进行修改。 1、将node_modules文件夹中 element-ui 文件夹的 packages 中的 tree 文件夹复制出来。 2、修改 tree-node.vue文件，在<el-checkbox></el-checkbox>标签中修改 v-if 的内容 3、使用自定义的tree组件 im...
el-tree 在父节点收缩状态下，点击复选框选中父节点，无法触发子节点check-change事件
weixin_41929569的博客
11-13 1331
查阅Element UI文档，提供一个属性render-after-expand，将他设置为false即可。事件通常用于处理节点的选中状态变化，而未展开的子节点不会触发选中状态的变化。组件中，默认情况下，子节点没有展开时是不会触发。如标题所示，在 Element UI 的。
elementui el-tree组件使用@check-change事件多次触发
weixin_42792507的博客
06-28 1万+
在一个项目中,有这样一个需求: 现在有一个table表格,一个el-tree树,下拉选择框, 表格中有一些默认数据, 当下拉选择类型后,可以勾选对应tree的子节点,勾选或取消勾选,动态展示在table表格中 遇到的问题: 使用@check-change时, 点击节点时,会多次触发, 勾选时,虽然会多次触发@check-change,但还是可以正常添加数据 然而, 在取消勾选时, 如果点击的是叶子节点, 因为多次触发@check-change, 执行数组删除操作时,就会把这个分类下所有的数据都删掉, 很明显
el-tree 获取当前勾选节点的选中状态以及选中值对象 触发check-change多次事件问题原因
最新发布
m0_65607651的博客
07-08 2948
el-tree 获取当前勾选节点的选中状态以及选中值对象 触发check-change多次事件问题原因 隐藏第一层或最后一层节点的勾选框
element-ui分页组件修改当前页current-page后current-change事件不触发的一个小bug
热门推荐
LarrySun
06-12 2万+
最近在开发中遇到一个element-ui分页的一个小bug，具体场景如下 1、首先点击正常分页来到第二页数据正常展示 2、点击搜索，需求为回到第一页按条件搜索，此时也正常展示 3、再次点击分页去第二页，此时分页还停留在第一页，current-change事件不触发 原因有可能是点击搜索的时候在搜索里面通过代码去改变了current-page让分页回到第一页，但有可能...
element plus 中 el-tree有v-model吗?
05-17
是的，`el-tree`组件在`element-plus`中也有 `v-model`属性，用于双向绑定选中的节点。可以通过设置`v-model`来控制选中的节点，也可以通过监听`@update:modelValue`事件来获取当前选中的节点。下面是一个示例代码： ```html <template> <el-tree :data="data" show-checkbox :props="defaultProps" v-model="checkedKeys" @check-change="handleCheckChange" ></el-tree> </template> <script> export default { data() { return { data: [ { id: 1, label: "Node 1", children: [ { id: 2, label: "Node 1-1", }, { id: 3, label: "Node 1-2", }, ], }, { id: 4, label: "Node 2", }, ], checkedKeys: [], defaultProps: { children: "children", label: "label", }, }; }, methods: { handleCheckChange(checkedKeys) { console.log(checkedKeys); }, }, }; </script> ``` 在上面的代码中，我们使用了 `v-model="checkedKeys"` 来双向绑定选中的节点，同时还监听了 `@check-change` 事件来获取选中节点的变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值