el-tree动态设置是否全部展开属性,值已经改变,但是没有展开或折叠

项目场景:使用el-tree组件,搜索后动态设置数据全部展示


问题描述

el-tree动态设置是否全部展开属性,值已经改变,但是没有展开

c 复制代码
   <el-select
              v-model="TableName"
              placeholder="请选择"
            >
              <el-input placeholder="请输入关键词" v-model="inputValue" maxlength="40">
                <i slot="suffix" class="el-input__icon el-icon-search" @click="getTreeData"></i>
              </el-input>
              <el-option :value="TableName" style="height: 200px; overflow-y: auto">
                <el-tree
                  v-loading="loading"
                  :data="treeData"
                  :index="index"
                  :props="defaultProps"
                  :default-expand-all="expandAll"
                  node-key="puid"
                  highlight-current
                  @node-click="
                    (data, node, item) =>
                      handleNodeClick(data, node, item, index, 'tableName')
                  "
                />
              </el-option>
            </el-select>

expandAll动态设置值为true false,值已经改变,树节点却没有展开

原因分析:

default-expand-all属性在第一次渲染时才生效,动态改变后,树早已渲染出来,所以需要等数据出来后重新渲染


解决方案:

css 复制代码
加个  v-if="refreshTree"
 <el-tree ref="tree"
                  v-loading="loading"
                  :data="treeData"
                  :index="index"
                  :props="defaultProps"
                  :default-expand-all="expandAll"
                  node-key="puid"
                  highlight-current
                  v-if="refreshTree"
                  @node-click="
                    (data, node, item) =>
                      handleNodeClick(data, node, item, index, 'tableName')
                  "
                />


父组件请求接口后处理
                 this.$refs.tree.refreshTree = false;
            this.$refs.tree.expandAll = inputValue ? true : false;//这里我是根据输入框是否有值判断是否是搜索后,大家可以酌情处理
            this.$refs.tree.$nextTick(() => {
              this.$refs.tree.refreshTree = true;
            });
相关推荐
IT_陈寒26 分钟前
Vue 3.4性能优化实战:5个鲜为人知的Composition API技巧让打包体积减少40%
前端·人工智能·后端
前端九哥32 分钟前
💻【急招!27届前端实习生】广州4399实习太幸福了!江景+三餐+健身房全都有😭
前端·面试·招聘
咖啡の猫38 分钟前
Vue全局事件总线
前端·javascript·vue.js
Lovereo1 小时前
我的目标检测性能优化之路:预算不够、GPU 没有、但性能我得要
前端
蒙娜丽宁1 小时前
Rust 与 WebAssembly:构建高效前端应用的全流程复盘
前端·rust·wasm
这儿有一堆花1 小时前
使用 Actix-web 开发高性能 Web 服务
前端·数据库
豆苗学前端1 小时前
10分钟带你入门websocket,并实现一个在线多人聊天室
前端·javascript·后端
白水清风1 小时前
Vue3之渲染器
前端·vue.js·面试
刘永胜是我1 小时前
解决Volta环境下npm全局包卸载失败:一次深入排查之旅
前端·node.js
白水清风1 小时前
Vue3之组件化
前端·vue.js·面试