Debug-029-el-table实现自动滚动&分批请求数据

前情提要

        最近做了一个小优化，还是关于展示大屏方面的。大屏中使用el-table展示列表数据，最初的方案是将数据全部返回，确实随着数据变多有性能问题，有时请求时间比较长。这里做的优化就是实现列表的滚动到距离底部一定高度时再次请求接口数据，实现分批请求提升性能。然后这里也实现让el-table自动滚动的功能

思路

  (1) 自动滚动：

        先给el-table绑定ref，拿到组件实例，找到真实滚动的那部分内容。这一步需要耐心点。然后就是监听这个滚动区域的滚动事件，利用视图展示区域（clientHeight）+垂直方向超出部分（scrollTop）和 内容实际的总高度三者的（scrollHeight）的关系判断内容是否滚动到底部，需要添加定时器增加scrollTop的高度，以达到自动滚动的效果，最终滚动完毕给出判断回到el-table顶部重新滚动（scrollTop置为0）。

备注：最初是查找官方文档，发现使用el-tbale的话没有直接可以支持自动滚动的属性，但是vue3中有v-infinite-scroll这个指令，不过我没试过放在el-table中使用，有机会各位可以去尝试一下。

  (2) 分批次请求数据

        还是要先拿到实际滚动的那块区域，然后还是监听滚动事件，由于增加了自动滚动，我开始的思路是把自动滚动和用户手动滚动两个情况分开，不过我在review的时候尝试了一下，确实是不需要区分的，不管是自动滚动还是手动滚动这里只需要考虑好滚动到合适的高度请求数据即可，拼接在之前的tbaleData中，直至达到总数停止

自动滚动

代码：

//自动滚动封装在table中，是否自动滚动由父组件传入autoScroll决定


//onMounted：组件挂载完成后执行。若autoScroll为真，则调用  //createScroll初始化滚动功能。
onMounted(() => {
  props.autoScroll && createScroll()
})

//onUnmounted：组件卸载前执行。若autoScroll为真，则调用  //clearScroll清理滚动相关资源
onUnmounted(() => {
  props.autoScroll && clearScroll()
})


const clearScroll = () => {
  if(!props.autoScroll) return
  clearInterval(timer)
  timer = null
}
const createScroll = () => {
  if(!props.autoScroll) return
  clearScroll()
  // 拿到 table
  const table = tableref.value.layout.table.refs
  // 拿到可以滚动的元素
  const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild
  timer = setInterval(() => {
    tableWrapper.scrollTop += 1.5
    // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
    if (tableWrapper.clientHeight + tableWrapper.scrollTop >= (tableWrapper.scrollHeight - 5))
      tableWrapper.scrollTop