vue项目遇到的奇葩需求

一、根据（组件）div高度判断是否第二次拉接口

由于组件原因，当页面第一次加载数据量较大的时候，只显示了几条数据。第二次拉口才能正常滚动。组件那边说是因为高度判断的问题，高度不够重新拉一下接口

• 思路：当内容高度小于div高度并且每行高度和数组长度的乘积大于div高度时重新拉一次接口
• 实现：使用ref获取当前组件div高度

const tableHeight = this.$refs.refName.$el.getElementByClassName('divName')[0].offsetheight

使用ref获取当前组件每行高度

const tableHeight = this.$refs.refName.$el.getElementByClassName('rowName')[0].offsetheight

在这元素就获取完成了，但是在这确踩了一个坑：拉完接口立马获取元素的高度为0，放到nextTick也不顶用，排查很久发现用settimeout延迟获取一下就可以了
原因：元素渲染需要时间，立马获取高度肯定是没有的

二、input输入框选中完成自动聚焦到下一个输入框

• 思路 选中输入完成，失焦当前输入框，js聚焦下一个输入框
  在实现时碰到了一个问题，没办法手动失焦元素，导致有两个输入框同时聚焦
• 解决：使用一个页面只能有一个元素被点击的特性来做这个功能

<input id='xxx' />

document.getElementById('xxx').click()

就能实现了（虽然有点丑）

三、首次加载数据量太大页面卡死优化

• 思路：使用分页加载（不符合产品需求pass）,使用虚拟滚动（可行）