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();//重新渲染树结构,动态控制展开/折叠
      },
    },
相关推荐
D_C_tyu5 天前
Vue3 + Element Plus | el-table 多级表头表格导出 Excel(含合并单元格、单元格居中)第二版
vue.js·elementui·excel
跟着珅聪学java5 天前
Element UI 的 el-input组件触发 blur事件
javascript·vue.js·elementui
Komorebi゛5 天前
【Vue + Element Plus】el-tree树结构样式改造,添加转折线
前端·javascript·vue.js·elementui
花生柿子5 天前
在elementui可横向滚动的table中,操作列有时候会透视下面的行
前端·javascript·elementui
敲代码的小吉米5 天前
Element Plus 表格中的复制功能使用指南
前端·javascript·elementui
小白探索世界欧耶!~13 天前
Vue2项目引入sortablejs实现表格行拖曳排序
前端·javascript·vue.js·经验分享·elementui·html·echarts
css趣多多14 天前
vue2项目改造为vue3遇到的问题以及解决办法
前端·vue.js·elementui
EstherNi15 天前
仿照elementui写图片放大的案例,但多加了下载按钮,vue3
javascript·vue.js·elementui
糕冷小美n18 天前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
沐墨染18 天前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code