vue element-ui，使用 this.$refs 无法获取 el-dialog 下的元素

Question

<div id="app">
  <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
  
  <el-dialog  title="收货地址" v-model="dialogTableVisible">
    <el-table  ref='gr' :data='gridData'>
      <el-table-column property="date" label="日期" width="150"></el-table-column>
      <el-table-column property="name" label="姓名" width="200"></el-table-column>
      <el-table-column property="address" label="地址"></el-table-column>
    </el-table>
  </el-dialog>
</div>

mounted () {
  console.log(this.$refs.gr);  // 提示 undefined 
}

Answer 1

看到这个问题的时候刚开始我也愣了一下，后来索性去试了一下发现了一些问题

从上图可以看到我，通过打印dialog的两个状态下的refs找到了问题

个人推测：由于，el-dialog嵌套el-table的情况下，el-table是在el-dialog打开后动态渲染上去的，也就是说，在没有打开dialog的情况下el-table在页面中并不存在，元素不存在的话，元素上的属性当然是获取不到的，因此显示undefind

那么按照你的需求可能需要处理下再获取ref，如下

你可以尝试一下，程序嘛，贵在尝试

Answer 2

我也遇到了这个问题，后来我一开始把dialogTableVisible=true;然后在mounted里面再改成dialogTableVisible=false；解决了问题
后来发现这个问题会让dialog一闪而过，还是参照上面的方法，在open()方法的回调里，获取refs，但是需要使用异步方式， Vue.nextTick(function () {console.log(this.$refs)}).

Answer 3

因为在你获取的时候 DOM 元素还没有挂载，类似的问题都可以通过加 防抖 来解决。

show () {
  setTimeout(() => {
    console.log(this.$refs)
  }, 0)
}

Answer 4

我也遇到了这个问题，你解决了吗？