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 
}

回答:

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

clipboard.png

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

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

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

clipboard.png

clipboard.png

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

回答:

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

回答:

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

回答:

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

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注