问题

先看github上的issue

Vue版本的AntDesign 的table不支持虚拟滚动

以上是用户对ant-design-vue table的关于滚动加载的需求。

那么，有问题就要解决。

vue2

由于项目是vue2的，我首先先说一下vue2，table下滑滚动加载的案例。

官方框架网站地址在这里

固体到table的文档在这个页面，以下是目录截图:

解决 心路历程

全篇确实是没有滚动下滑远程加载列表这个东西，那如果需要中确实又要，那么就需要找组件比如说，用这个框架的List列表来做一下这么一个滚动加载的东西，以下为List列表的目录：

来看一下这个滚动加载这一项是怎么实现的:

这个 v-infinite-scroll="handleInfiniteOnLoad" 的 handleInfiniteOnLoad 方法的具体是怎么做的呢，贴代码:

就是滑动到底部的时候，他就触发了 v-infinite-scroll 指令中的 handleInfiniteOnLoad 这个方法，然后呢，就请求接口，得到的数组，不断地concat，边长变大。大概是这么一个做法，奈何它这个东西是依靠什么呢？依靠一个npm包，也就是 vue-infinite-scroll 库来工作的，这样，它才有这个vue-infinite-scroll这个指令，

当然我们也可以自己封装一个指令，这个是个后话。这个其实不算难，就是触底加载的意思，触底了就触发某个方法，请求数据concat数据，我们自己也可以做。

这里有个不好的点是什么呢，我要表，他给我list，我做成表，那我要做表头啊各种各样的东西，为何说table转成list不好搞呢，我们来看看list的基础列表是如何做的。

那如果我们要搞成表格，像这种，是极其不好搞的，特别是本来就是表格，要拆成一个一个块去写，再在里面写方法。还要搞表头，只是之前是分页，现在要搞成滚动到底部加载下一页，像下面截图的这种表格:

或者是下面截图的这种多层级的表格：

要拆解成这种list，是很难搞的饿。

有的人就说了，”我之前做element的时候，table就有滚动加载的，很简单的“，都说了是element库帮我们封装了一个滚动加载的，那现在搞的是ant-design-vue嘛，它确实没帮我们封装好，没搞好嘛。

所以就需要我们自己搞搞看咯。

vue2,

第一步 加指令

做自定义指令

原理: 当table滚动下滑到距离底部一定距离的时候，调用接口，接口的数据不停地concat就能变长，从而，就能实现a-table下滑滚动加载的效果。

找到项目目录放自定义指令的目录，新建一个文件叫 loadMore.js：

代码:

export default {
    install (Vue) {
        Vue.mixin({
            directives: {
                loadMore: {
                    bind (el, binding) {
                       let bindTime = null
                       clearTimeout(bindTime)
                       bindTime = setTimeout(function () {
                           let dom = el.querySelector('.ant-table-body')
                           let lastScrollTop = 0
                           
                           dom.addEventListener(
                               'scroll',
                               function () {
                                   const bottom = 20
                                   if (lastScrollTop !== this.scrollTop) {
                                       lastScrollTop = this.scrollTop
                                       const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
                                       if (scrollDistance <= bottom) {
                                           binding.value() // 如果距离底部小于或者等于20，直接运行这个指令绑定的方法
                                       }
                                   }
                               }
                           )
                           
                       }, 200)
                    }
                }
            }
        })
    }
} 

第二步 引入

import loadMore from '@/core/directives/loadMore'
Vue.use(loadMore)

第三步 使用

贴代码吧

concat 可换成 [...this.list, ...res.data] 数组扩展运算符写法

vue3

同样添加自定义指令

loadMore.js

main.js

App.vue

---

以上，Vue版本的AntDesign的虚拟滚动下滑加载，就可以了。

Surely vue

当然，ant design vue 官方文档上，有个 surely vue, table能支持横向纵向虚拟滚动加载，第一 仅仅支持 vue3.x版本，并且需要授权（有开支）才能用。

总结

原理上面讲了，思路就是给这个指令绑定的元素，加个监听滚动事件，然后判断到底部就接口加载数据，一直追加到列表中。

如果你在用其他框架，正好也是没有这种table滚动数据加载的功能，也可以类似地这样去实现，react也是同样原理。

---

保持一颗解决问题的心