【Vue】Table滚动条瀑布流数据无限加载功能

思路：

监听scroll事件，当滚动条到底部时，再加载下一页数据。

滚动条到底部的条件：

scrollTop + clientHeight >= scrollHeight

已看完的+正在看的>=当前加载完的所有数据

例如，

视窗可以显示5条（clientHeight = 5），

第1页有20条数据（scrollHeight = 20），

已看完10条（scrollTop = 10），

此时并没有滚动到底部，还有5条未进入视窗范围（10 + 5 < 20）

scrollTop：滚动条距离顶部高度，也就是已经滚动完的高度，也就是已经看完的数据高度

clientHeight ：视窗高度，也就是正在看的数据高度

scrollHeight：可滚动部分的高度，也就是当前所有已加载的数据的总高度

 一、iView的Table组件

通过JS实现，注意firefox的滚动条事件不兼容，会出现滚动条不停触底引发数据加载

参照：https://mp.csdn.net/postedit/82881216

        mounted() {
            if(window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1){
                document.getElementsByClassName("ivu-table-body")[0].addEventListener("scroll",
                        this.scrollLoadHistoryListForFirefox);
            }else{
                document.getElementsByClassName("ivu-table-body")[0].addEventListener("scroll",
                        this.scrollLoadHistoryList);
            }
        },
        methods: {
                scrollLoadHistoryList: function () {
                    var tabldDiv = document.getElementsByClassName("ivu-table-body")[0];
                    var scrollHeight = tabldDiv.scrollHeight;
                    var scrollTop = tabldDiv.scrollTop;
                    var windowHeight = tabldDiv.offsetHeight;

                    if (scrollTop + windowHeight >= scrollHeight) {
                        // 页数++
                        // 数据 + 页数 * 每页件数
                    }
                },
                scrollLoadHistoryListForFirefox: function () {
                    var tableDiv = document.getElementsByClassName("ivu-table-body")[0];
                    var scrollHeight = tableDiv.scrollHeight;
                    var nowScrollTop = tableDiv.scrollTop;
                    var windowHeight = tableDiv.offsetHeight;

                    if (nowScrollTop + windowHeight >= scrollHeight
                            && this.lastScrollTopForFirefox > 0
                            && nowScrollTop > this.lastScrollTopForFirefox) {
                        // 页数++
                        // 数据 + 页数 * 每页件数
                    }

                    this.lastScrollTopForFirefox = nowScrollTop;
                }
        }

二、vue-data-tables组件

通过vue自定义指令实现——Vue.directive('', {})

API — Vue.js

自定义指令 — Vue.js

自定义指令，大概就是给组件添加一个属性，这个属性就类似v-model之类的属性

问题现象：使用vue-data-tables提供的组件，无法对视窗添加scroll事件监听，可能是组件渲染过程中加载顺序不一样导致的

所以可以通过自定义指令来实现

1.全局注册自定义指令

下面这个指令的意思是，创建一个table-scroll-load属性，并给这个属性绑定一个操作，当滚动条到最底部时，执行这个操作，具体的操作内容在第2步指定

Vue.directive('table-scroll-load', {
    bind(el, binding) {
        const selectWrap = el.querySelector('.el-table__body-wrapper');
        selectWrap.addEventListener('scroll', function() {
            if (this.scrollTop + this.clientHeight >= this.scrollHeight) {
                binding.value();
            }
        });
    }
});

2.使用时，先给标签添加v-table-scroll-load属性

<data-tables :table-props="{ height:tableHeight, border:true, rowClassName:rowClassName }"
  layout="table" :data="catagoryList" v-table-scroll-load="loadNewPage">

3.实现触发该属性时要做的操作，也就是loadNewPage方法

            methods: {
                loadNewPage() {
                    // 页数++
                    // 数据 + 页数 * 每页件数
                }
            }