解决Element 树形菜单Tree组件能拿到数据，但是组件不渲染问题

最新推荐文章于 2023-09-05 09:03:47 发布

ddx2019

最新推荐文章于 2023-09-05 09:03:47 发布

阅读量7.5k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： # Vue+Element+... 所遇问题，小记文章标签： Element Tree tree不渲染 tree有数据 Tree不渲染 nextTick

本文链接：https://blog.youkuaiyun.com/ddx2019/article/details/107482464

所遇问题，小记同时被 2 个专栏收录

74 篇文章

订阅专栏

Vue+Element+...

68 篇文章

订阅专栏

本文描述了在Vue项目中，左侧树形菜单能够正常渲染，但在弹窗中的相同树形菜单组件却无法渲染的问题。通过使用$nextTick方法，实现数据延迟更新，成功解决了Tree组件的数据更新与渲染不同步的难题。

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

一、问题描述

我左侧的树形菜单和弹框中的格式一样，组件也是一样的，左侧的树形菜单能渲染出来，但是弹窗中的树形菜单并未渲染。

1. 左侧树形菜单：拿到数据并进行了渲染出了树形菜单，
2. 弹框中的树形菜单：拿到了数据，但并未渲染出树形菜单
在这里插入图片描述

代码如下：（下面代码不可直接运行， comn-tree不存在，会报错，因为comn-tree是封装的组件，这里只是想记下笔记，不做详细说明）


<template>
  <div>
   			<comn-tree
            :treeList="treeList"
            @handleNodeClick="handleNodeClick"     
          ></comn-tree>
  <el-button @click="Move">移动</el-button>
    <el-dialog
      class="comn_dialog"
      :title="dialogTitle"
      :visible.sync="visible"
      width="415px"
      top="23vh"
    >
          <comn-tree
            :treeList="treeInMovePopup"
            @handleNodeClick="popupNodeClick" 
          ></comn-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="Save">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
	data(){
	  return  {
	    dialogTitle:"移动公共树参数"
	    centerDialogVisible: false,
	    treeList:'',   // treelist 会在其他地方调后台 获取
	     treeInMovePopup:''  // 需要显示弹框中的树形菜单时，将treeList赋值给它
	  }
	},
  methods: {
   
    Cancel() {
     this.centerDialogVisible=false;
    },
    Save() {
     alert('提交')
    },
    Move(){
		this.treeInMovePopup = JSON.parse(JSON.stringify(this.treeList));
	},
	handleNodeClick(val){
	console.log(val,"左侧树形菜单被点击")
},
popupNodeClick(val){
	console.log(val,"弹框中的树被点击")
},

  }
};
</script>

二、解决办法

 //  将数据延迟一个周期传入，解决Tree 组件拿到数据但并没有渲染的问题
          this.$nextTick(() => {
            this.treeInMovePopup = JSON.parse(JSON.stringify(this.treeList)); // 深拷贝
          });