一、问题描述

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

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)); // 深拷贝
          });