【vue表格实现平滑滚动的小bug】

是我在借鉴大佬的js表格实现平滑滚动的效果后，放在我的项目里。
刚开始把数据写死的时候，列表可以正常上下平滑滚动
但是吧 真实情况下。数据肯定是活的
就想着先本地模拟一下数据。看看后端需要什么格式的数据
bug来了

<div id="roll_box" @mouseover="rollStop()" @mouseout="rollStart(60)">
<ul id="comment1">  <li v-for="item in tableData" :key="item.Id" class="list-style">    
<div class="item-style">      
<span class="comSpan">{{ item. }}</span>      
<span class="comSpan">{{ item. }}</span>      
<span class="comSpan">{{ item. }}</span>      
<span class="comSpan">{{ item. }}</span>    
</div>  
</li>
</ul>
<ul id="comment2">  
<li v-for="item in tableData" :key="item.Id" class="list-style">    
<div class="item-style">      
<span class="comSpan">{{ item. }}</span>      
<span class="comSpan">{{ item. }}W</span>     
 <span class="comSpan">{{ item. }}K</span>     
 <span class="comSpan">{{ item. }}%</span>    
</div>  
</li>
</ul>
</div>

数据写死的时候 第二个ul 在渲染的时候会自动添加数据，只是渲染的时候被隐藏了，所以可以顺利平滑滚动；
但是 动态获取数据的时候 如果第二个ul只有

<ul id="comment2"> 
 </ul>

这样得话 这个ul高度为0 就是说并没有内容 当然不能顺利平滑滚动 所以也就出现了 只滚动一次的bug
解决方式 就是第一个代码块
【在动态获取的数据的时候 让第二个也去利用v-for渲染一个一摸一样的】
这样 问题。就解决了