关于@check-change触发多次的坑

在一个项目中,有这样一个需求: 现在有一个table表格,一个el-tree树,下拉选择框, 表格中有一些默认数据, 当下拉选择类型后,可以勾选对应tree的子节点,勾选或取消勾选,动态展示在table表格中 遇到的问题: 使用@check-change时, 点击节点时,会多次触发, 勾选时,虽然会多次触发@check-change,但还是可以正常添加数据 然而, 在取消勾选时, 如果点击的是叶子节点, 因为多次触发@check-change, 执行数组删除操作时,就会把这个分类下所有的数据都删掉, 很明显

再者，就是直接选择复选框的话，复选框假如是全选的状态的话，点击树节点的父节点的话，会改变子节点所有的选择，则会触发节点数数量+1（父节点）的check-change次数。简单来说，就是当你触发了子节点的复选框，如果复选框为全选的状态，因为你的一次触发，导致变为半选的状态，导致会在触发一次父节点的复选框check-change。反之，假如树节点的复选框是没有选择的状态，由于选择了子节点后，变成了半选的状态，又会触发一次check-change。通过以上的官网的解释我们可以发现二者的不同。

我要实现的效果是，当选中的节点状态改变的时候使用 getCheckedNodes() 来获取选中的节点 遇到的问题： 当我点击选择框选中状态改变的时候，如果有多级子节点，那就会触发多次（因为子节点的选中状态也被改变） 解决办法： 把 check-change 事件改为 check 事件，只有当点击修改状态的时候才会触发 ...

element ui tree的@check-change方法 this.refs.treeGasRef.getCheckedNodes()这个意思是获取选中对应框的在值，点击选框后激活@check——change方法，传入this.refs.treeGasRef.getCheckedNodes() 这个意思是获取选中对应框的在值，点击选框后激活@check——change方法，传入this.re...

elementui中el_tree 复选框多次重复触发的问题

在el-tree里使用复选框的时候，当节点没有被展开时，点击复选框只会触发当前点击节点的@check-change事件，但是业务需求是需要点击节点时，能够展开所有子节点并且全部都触发@check-change事件。遇到的问题是，本来想在点击复选框的时候，获取到node, 通过node.expaned = true来实现节点展开，节点是展开了，但是不会再次去触发check-change事件了，达不到想要的效果。这样就可以保证既可以展开节点，也能触发选中事件！

把@check-change改成@check，具体为啥我也不清楚，但是确实是可以了

查阅Element UI文档，提供一个属性render-after-expand，将他设置为false即可。事件通常用于处理节点的选中状态变化，而未展开的子节点不会触发选中状态的变化。组件中，默认情况下，子节点没有展开时是不会触发。如标题所示，在 Element UI 的。

tree提供的方法貌似没有可以直接获取节点DOM，或者点击勾选节点响应函数参数node其实只是传入data的数据对象，拿不到DOM，得想想法子来获取之事情是这样的：最近做一个表单，要能勾选一个二级的下拉数据，于是就想起了element的tree组件，而且二级的数据是要调用接口懒加载展开的，这个应该很多人会遇到这种需求，tree组件即支持勾选框又支持懒加载节点，功能是够用的。所以起初我是这样用组件的...

目录 实现过程： 一、tree封装 1.tree组件代码： 2.定义dataList： 3.定义初始值 4.computed和mthods的区别： 二、注册tree权限 1.引入树形控件子组件 2.试题分类点击事件，调用接口（调用接口忽略） 3.清楚渲染的是谁的数据 老规矩：先走波流程看实现效果！ 实现过程： 在question-edit界面实现查询数据，将数据以树状图效果渲染出来，question-edit要给tree文件注册权限。 首先讲解tree文件代码；再讲quest

然后说下选中当前节点去获取其节点下的所有子节点的ID问题，网上搜了许多没有合适自己的方法，项目需求是单选，用了父子不关联的方法实现的单选，需要做下控制就是父节点不允许点击的情况下的子节点也不允许点击，这个时候就需要递归算法解决此问题，（递归算法适用所有场景下的获取子节点的数据）第一个参数为ture表示获取子节点下的数据，由于父子不关联，所以取值为空数组。官方提供了这个方法 获取选中节点的数组可以方便我们进行递归实现。设置选中节点后去递归获取选中节点的所有子节点的数据。

Element UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架。在前端form表单的开发中会利用Element UI中的el-tree组件作为作为form表单中树状结构的复选框使用，但有时出于实际数据验证的需要，要对el-tree组件的树状结果是否选择进行验证。如果完全通过自己写逻辑代码无疑会比较复杂，如果想通过form表单自带的验证方法，官网又没有提供详细方法。为此本文...

【代码】Element-UI实现的下拉搜索树组件(el-select、el-input、el-tree组合使用)

tree提供的方法貌似没有可以直接获取节点DOM，或者点击勾选节点响应函数参数node其实只是传入data的数据对象，拿不到DOM，得想想法子来获取之事情是这样的：最近做一个表单，要能勾选一个二级的下拉数据，于是就想起了element的tree组件，而且二级的数据是要调用接口懒加载展开的，这个应该很多人会遇到这种需求，tree组件即支持勾选框又支持懒加载节点，功能是够用的。所以起初我是这样用组件的...

多选： 使用的是插件市场的tree树组件（ly-tree) <ly-tree ref="tree" :treeData="treeData" v-if="ready" nodeKey="id" @node-expand="handleNodeExpand" @node-click="handleNodeClick" :showCheckbox="true" :checkOnClickNode="true" :expandOnClickNode="false" :defaultExpa

Element UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架。在前端form表单的开发中会利用Element UI中的el-tree组件作为作为form表单中树状结构的复选框使用，但有时出于实际数据验证的需要，要对el-tree组件的树状结果是否选择进行验证。如果完全通过自己写逻辑代码无疑会比较复杂，如果想通过form表单自带的验证方法，官网又没有提供详细方法。为此本文...

<template> <div> <div> <el-input placeholder="Search" size="small" v-model="filterText" clearable @keyup.enter.native="onSearch" @clear="onSearch" ></el-input&g...

文章目录功能要求第一次的分析思路（失败的逻辑）第二次的逻辑思路（可以直接看这里）代码1.html代码和一些属性解释2.单个勾选操作的代码 功能要求 点击按钮后，弹框显示可勾选的人员，一级节点为班级，二级节点为班级内的人员。同时提供 条件搜索 ，搜索后显示符合条件的可勾选人员。勾选操作都是在一个弹框页面进行的，等用户 多次搜索选定所有人员 后，点击确定按钮，点击提交将数据传给后端。 第一次的分析思路（失败的逻辑） 可能大家的第一反应都是用el-tree自带的 check-change 或者 node-clic

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