element-plus 组件el-tree 绑定的响应式数据组件不更新！

最新推荐文章于 2025-04-10 22:51:01 发布

阿东toastLi

最新推荐文章于 2025-04-10 22:51:01 发布

阅读量984

点赞数 3

分类专栏： element-plus el-tree vue 文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/toastRouter/article/details/136848439

版权

vue 同时被 3 个专栏收录

3 篇文章

订阅专栏

element-plus

2 篇文章

订阅专栏

el-tree

2 篇文章

订阅专栏

作者在使用el-tree组件时遇到数据更新不渲染的问题，发现可能需要通过初始化重构配置属性来确保组件更新。提到默认展开所有功能的动态切换无响应，需用v-if手动控制并添加延迟加载解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近用了几次 el-tree树组件发现即使通过ref或者reactive 绑定数据，数据更新后el-tree 组件未渲染更新？最后还是v-if 手动强制重构；大概率组件只能初始化重构配置属性数据才能更新：

eg: default-expand-all 响应式展开与收起动作

// 1 html 
 <div class="branch_left_tree" v-if="isOpenAllLoading">
        <el-tree
          style="width: 100%"
          :data="BranchLists"
          :default-expand-all="isOpenAllBranch"
          node-key="id"
          :default-expanded-keys="[101]"
          :current-node-key="101"
        />
 </div>
<script setup lang="tsx">

const isOpenAllLoading = ref(true)
const isOpenAllBranch = ref(false)

// 动态配置是否展开树无响应  无脑if 跟新
// 折叠收起
const handeleOpenTBtn = () => {
  isOpenAllLoading.value = false
  isOpenAllBranch.value = !isOpenAllBranch.value
  // 异步一下展示
  setTimeout(() => {
    isOpenAllLoading.value = true
  })
}

</script>

挖个坑：具体影响后面慢慢看先继续搬砖