类同问题描述:
<div>
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog ref='dialog' title="收货地址" v-model="dialogTableVisible">
<el-table ref='gr' :data='gridData' selection-change ='handleSelectionChange'>
<el-table-column ref= 'col' type="selection" :selectable = "selection" width="55" ></el-table-column>
<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 : function () {
console.log(this.$refs);
console.log(this.$refs.gr); //提示undefined
}
推测原因:
- 由于,el-dialog嵌套el-table的情况下,el-table是在el-dialog打开后动态渲染上去的,也就是说,在没有打开dialog的情况下el-table在页面中并不存在,元素不存在的话,元素上的属性当然是获取不到的,因此显示undefind
解决方式
- 在dialog中添加@open方法,在该方法中再获取this.$refs即可。
引用自