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

1、如下图通过勾选框动态控制展开/折叠,全选/清空

2、实现方式如下:定义key,监听checked2修改treeKey,重新渲染tere;附加全选和清空。

bash 复制代码
      <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();//重新渲染树结构,动态控制展开/折叠
      },
    },
相关推荐
一只小阿乐16 小时前
vue3 使用v-model开发弹窗组件
javascript·vue.js·elementui
humors2211 天前
前端开发案例(不定期更新)
前端·vue.js·elementui·ruoyi·若依
阿奇__1 天前
el-table有固定列时样式bug
vue.js·elementui·bug
是大林的林吖4 天前
解决 elementui el-cascader组件懒加载时存在选中状态丢失的问题?
前端·javascript·elementui
鹏仔工作室4 天前
elemetui中el-date-picker限制开始结束日期只能选择当月
前端·vue.js·elementui
竹秋…4 天前
el-table 滚动条小箭头点不了且部分滚动条无法拖动的问题
javascript·vue.js·elementui
一室易安4 天前
模仿elementUI 中Carousel 走马灯卡片模式 type=“card“ 的自定义轮播组件 图片之间有宽度
前端·javascript·elementui
蒲公英源码6 天前
uniapp开源ERP多仓库管理系统
mysql·elementui·uni-app·php
533_11 天前
[vue3] h函数,阻止事件冒泡
javascript·vue.js·elementui
Jeffrey__Lin12 天前
解决Grid布局下el-table自适应缩小失败的问题
vue.js·elementui·html