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

最新推荐文章于 2025-09-11 04:50:23 发布

原创最新推荐文章于 2025-09-11 04:50:23 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

vue 同时被 3 个专栏收录

3 篇文章

订阅专栏

element-plus

2 篇文章

订阅专栏

el-tree

2 篇文章

订阅专栏

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

最近用了几次 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>

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