Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

element.ui里的dialog有一个问题不知道该怎么解决。

1. 例如我在dialog里写了一个表单组件，给表单组件设置了ref为form,在打开dialog的时候需要对里面的表单组件进x行this.$ref[‘form’].queryList(),来获取数据。
2. 现在发现第一次打开dialog的时候，this.$ref[‘form’]为undefined。
3. 说白了就是v-if当为false的时候，还么有这个组件，则通过ref拿到的为undefined

<el-dialog :visible.sync="dialogVisible" append-to-body>
      <PickUpGoods v-if="dialogVisible" ref="pick" @callback="callback"></PickUpGoods>
    </el-dialog>

<div @dblclick="selectGoods('pick')">
          <el-input v-model="submitData.goodsCode" placeholder="双击选择" disabled />
 </div>

selectGoods(refForm) {
      this.dialogVisible = true;
      console.log(this.$refs[refForm]);
    },

点击事件js代码：点击时发现为undefined

解决办法:

selectGoods(refForm) {
      this.dialogVisible = true;
      setTimeout(() => {
         console.log(this.$refs[refForm]);
      }, 0);
    },

vue setTimeout–延迟操作
有时候我们在查询后要做某些事情，例如我查询的时候要根据某个值再去查询某些东西并和这些值一起显示的时候，我们可以对渲染数据的操作进行延迟，因为代码执行的速度是很快的而访问数据的操作相对于渲染的速度慢得多，所以往往数据还没查询到而数据就渲染完成了

setTimeout(() =>{
    要延迟的代码

},延迟时间);