问题说明
说明:开发过程中,使用elementUI中的table,并且带分页,在某一栏目中用了ref,当该页面实际数据条数,小于代码中每页默认数据条数时,会出现打印改ref时出现undefined。具体看如下代码。
// 注:一定是带分页的table,这里只是代码片段。
<el-table-column label="日期" align="center">
<template slot-scope="scope">
<el-date-picker
ref="test1"
v-model="scope.row.date"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</template>
</el-table-column>
问题解析
为了排查为什么会出现上述问题,将代码改为如下之后再打印
<el-table-column label="日期" align="center">
<template slot-scope="scope">
<el-date-picker
:ref="'test' + scope.$index"
v-model="scope.row.date"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</template>
</el-table-column>
有意思的是,当在页面调整为每页展示5条数据时,打印出来ref还是10条,当在页面调整为每页展示20条数据时,打印出来的数据就是20条了。
当默认分页为10,但是当前只有2条数据时,打印结果:
猜想
由上述测试结果,个人推测使用elementUI的table(带分页),在其中使用ref时,如果当前页实际数据小于指定数据条数时,就会被后边的ref覆盖掉,就会出现undefined。
其他
网上有其他说ref打印出现undefined情况,使用如下代码:
this.$nextTick((_) => {
console.log(111, this.$refs);
});
总结
其实终极原因都是dom没有渲染出来,使用nextTick是因为还没渲染出来就打印了,该篇文章也是因为dom没有渲染而导致undefined。