当前位置: 首页 > news >正文

el-tree通过default-expand-all动态控制展开/折叠

1、如下图通过勾选框动态控制展开/折叠,全选/清空
在这里插入图片描述
2、实现方式如下:定义key,监听checked2修改treeKey,重新渲染tere;附加全选和清空。

      <div class="tree"><el-checkbox v-model="checked1">选中全部</el-checkbox><el-checkbox v-model="checked2">展开全部</el-checkbox><el-tree :key="treeKey" :data="treeData" show-checkbox node-key="id" :props="defaultProps" ref="tree" :default-expand-all="checked2"></el-tree></div>watch: {// 树形控件全选/清空'checked1':function (newVale,oldVale) {if(newVale === false) {this.$refs.tree.setCheckedKeys([]);//清空} else {this.$refs.tree.setCheckedNodes(this.treeData);//全选}},// 树形控件展开/折叠'checked2':function (newVale,oldVale) {this.treeKey = Date.now();//重新渲染树结构,动态控制展开/折叠},},
http://www.lryc.cn/news/125933.html

相关文章:

  • 基于Bsdiff差分算法的汽车OTA升级技术研究(学习)
  • 如何使用CSS实现一个纯CSS的滚动条样式?
  • 使用维纳过滤器消除驾驶舱噪音(Matlab代码实现)
  • vue所有UI库通用)tree-select 下拉多选(设置 maxTagPlaceholder 隐藏 tag 时显示的内容,支持鼠标悬浮展示更多
  • 进行 200 瓦太阳能 (PV) 模块设计以测量太阳能光伏阵列的电压、电流和功率、综合负荷频率和电压控制系统的方法研究(Simulink实现)
  • 实战:工作中对并发问题的处理 | 京东物流技术团队
  • 解决VSCode CPU高占问题的方法
  • tensorflow 1.x和3090、cuda部署
  • vue-photo-preview( 照片预览功能 )
  • Angular 独立组件入门
  • Lie group 专题:Lie 群
  • Vue-打印组件页面
  • Python爬虫——scrapy_基本使用
  • 30 | 中国高校数据分析
  • 开源低代码平台Openblocks
  • 每日汇评:黄金在 200 日移动平均线附近似乎很脆弱,关注美国零售销售
  • DFT笔记 DC/AC mode与Func
  • docker核心操作
  • 《电路》基础知识入门学习笔记
  • 什么是P2P?
  • matlab RANSAC拟合多项式曲线
  • 微信小程序nfc指令异常记录
  • 10 - 把间隔的几个commit整理成1个
  • 关于 Eclipse 的一场 “三角关系”
  • koa 使用 Mongoose 查询数据
  • 前后端分离------后端创建笔记(10)用户修改
  • K8S系列文章之 Docker安装使用Kafka
  • js如何获取字符串大小是几M
  • 服务器托管中1U是什么意思?
  • Golang自定义类型与类型别名