项目场景：

elementui组件中，树形组件的使用

问题描述：

通过树形结构展示，点击勾选数据。没有展开树结构的情况下，勾选树节点时，其叶子节点全部被勾选，@check-change=“handleCheckChange”，叶子没有响应check-change函数

<el-dialogtitle="短信接受对象选择":visible.sync="dialogVisible"width="40%":close-on-click-modal="false"><el-row class="person-selected" :gutter="20"><div v-for="person in nameList" :key="person.key">{{ person.name }}<i class="el-icon-close" @click="eventPersonRemove(person.key)"></i></div></el-row><el-row><el-tree:data="data"show-checkboxnode-key="id"ref="tree":render-after-expand=falsehighlight-current@check-change="handleCheckChange"></el-tree></el-row><el-row class="form-footer"><el-button @click="resetChecked">重 置</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></el-row></el-dialog>

return {dialogVisible: false,data: [{id: 2,label: '研发部',isLeaf: false,children: [{id: 5,label: '王五',isLeaf: true,}, {id: 6,label: '赵六',isLeaf: true,}]}, {id: 3,label: '综合部',isLeaf: false,children: [{id: 7,label: '张三',isLeaf: true,}, {id: 8,label: '李四',isLeaf: true,}]}],nameList:[],defaultProps: {children: 'children',label: 'label'},}

原因分析：

elementUI的tree控件，其属性render-after-expand（默认为true）是否在第一次展开某个树节点后才渲染其子节点，应绑定为false，不展开节点也渲染其子节点。

解决方案：

resetChecked() {this.$refs.tree.setCheckedKeys([]);},handleCheckChange(data, checked, indeterminate) {// console.log(data.label)let self = this;if (checked === false){for (let i = 0; i < self.nameList.length; i++) {if (self.nameList[i].key === data.id){self.nameList.splice(i, 1);break;}}}else {if (data.isLeaf) {self.nameList.push({name:data.label, key:data.id})}}},

.person-selected {padding: 10px;div {position: relative;float: left;min-width: 100px;height: 30px;padding: 0 20px;margin: 0 10px 10px 0;line-height: 30px;color: #fff;text-align: center;background-color: #0a8d4f;border-radius: 15px;i {position: absolute;top: 0;right: 0;width: 20px;height: 30px;line-height: 30px;text-align: left;z-index: 1;}}}

elementui组件中，树形组件的使用相关推荐

react 组件中使用组件_禁止使用React功能组件的7个理由
react 组件中使用组件 Are React's Functional Components Worth The Cost? React的功能组件值得吗? Update 5/31/19: React ...
后端返回JSON数组转Tree树形格式，展示到element-ui的tree树形组件
将js数组转换成tree树形组件要的数据格式,有时候后端返回的是数组没有处理成树状结构,这个时候就需要前端自行转换,这里采用递归方式转换要展示的效果上代码 <!DOCTYPE html> ...
react类组件中父组件调用子组件函数
1.自定义事件子组件在 componentDidMount 生命周期里调用父组件的方法将 this 传给父组件 Son import React, { Component } from 'react ...
LayUi 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,我自己修改了下最新源码tree.js,简单粗暴的方式支持懒加载模式.(Ps:最新更新 ...
React中受控组件和非受控组件
受控组件在React中,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件.受控组件中,组件渲染的状态与它的value或者checked相对应.React通 ...
Vue子组件中渲染动态组件无效（第一次无效、第二次有效）
问题分析今天在写代码的时候,用到了 Vue框架的动态组件,本来用的好好的(具体用法参考官方文档),后来改进了一下业务功能,在子组建中也使用了和父组件相同的动态组件方法,由于子组件采用对话框i的形式, ...
六十、深入理解Vue组件，使用组件的三个细节点
@Author:Runsen @Data:2020/10/16 文章目录 is的使用组件中的data必须是方法 ref 引用 Vue中如何操作dom 实现计算器中的功能后言备战前端.大四加油.下 ...
触发父组件变量_Vue组件之间的传值
我们知道组件之间传值无非就三种情况父组件给子组件传值子组件给父组件传值兄弟组件之间的传值父 => 子老王是个有钱人,准备把自己的家产传给宝贝儿子小王用代码模拟实现就是下图这样现在小 ...
vue ref是在组件里唯一吗_父组件伸手子组件的方式总结
1. 前言这篇文章就是总结react,vue父组件如何伸手获取子组件的数据以及调用子组件方法的. 2. react 以下的代码都是基于16.8版本. 2.1 类组件 react在hook出来前,只要 ...
Vue组件通信——父子组件通信的四种方法
引入组件全局引入在main.js文件中引入并注册 import ChildrenDemo from '@/views/components/ChildrenDemo' Vue.component( ...