一、根据(组件)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),使用虚拟滚动(可行)
网友评论