Vue根据屏幕分辨率计算div可以显示的数量，dom渲染在v-if之后造成的复杂处理

前言​

欢迎大家来到我的博客，请各位看客们点赞、收藏、关注三连！

欢迎大家关注我的知识库，全栈进阶之路

你的关注就是我前进的动力！

CSDN专注于问题解决的博客记录，语雀专注于知识的收集与汇总，包括分享前沿技术。

正文

需求：

最近在做一个首页，这个首页是懒加载，然后要根据不同的屏幕分辨率计算每个div的高度，适配显示。
这个好就好在不是table列表，那么就不需要获取总数。
当然也可以获取总数来判断需不需要请求数据。

问题：

难就难在为了处理没有数据时，显示的页面，想当然就使用了v-if和v-for结合来判断。结果dom获取不到div的高度，无法计算问题。
例子：

<div ref="loginAll">
	<ul>
		<li v-for="(item,index) in tableData" class="infinite-list-item" :key="index" ref="login">li>
	ul>
	
div>
<el-empty :image-size="200" v-if="!loading">el-empty>
1
2
3
4
5
6
7

这个 ul、li的数据是要从后台获取，这就造成了，我要计算高度。我要先拿数据。
没有高度（条数），我请求多少数据回来。
没有数据，我拿来的高度计算（条数返回）。
高度=条数。两者的因果关系，陷入死循环了。
我想到的处理方法是，先以10条去分页查询，然后进入ajax渲染数据，计算高度，用两个array分别存储屏幕分辨率可存放的list，屏幕外的数据存放到另一个list。

然后，问题的关键来了，我用refs获取dom，结果 $refs.login 是undefined。
然后高度就无法计算！！！
怎么办呢？
我想到在ajax回调方法里面，我先渲染第一个元素，这样我就可以计算到li 的高度，然后在渲染其他的。
感觉似乎我的处理，把业务处理的复杂了。
不知道各位大佬有没有更好的解决方案，欢迎提出!