elementui dilaog中嵌套dialog后在mounted()中获取this.$refs.upload为空

类同问题描述:

<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便可。

引用自

• elementui+el-table获取this.$refs为空