使用elementUI的table时，打印ref为undefined

问题说明

说明：开发过程中，使用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。

这篇好文章是转载于：学新通技术网