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

<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 
}
阅读 9.3k
评论
    4 个回答
    _gjy_
    • 385

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

    clipboard.png

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

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

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

    clipboard.png

    clipboard.png

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

    评论 赞赏

      我也遇到了这个问题,你解决了吗?

      评论 赞赏
        overair
        • 1
        • 新人请关照

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

        评论 赞赏

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

          show () {
            setTimeout(() => {
              console.log(this.$refs)
            }, 0)
          }
          评论 赞赏
            撰写回答

            登录后参与交流、获取后续更新提醒