element table滚动加载+vue自定义指令

1、首先自定义 一个全局滚动加载指令 命名为： loadmore

.el-table__body-wrapper是加载容器，获取向下滚动距离，和左滑距离，只有向下滚动到底部时，触发加载事件，且当滚动条达到底部时，左右滑动时不再重复触发加载事件。

Vue.directive('loadmore',{
			bind: function (el,binding) {
				const selectWrap = el.querySelector('.el-table__body-wrapper');
				let currentLeft = 0;//初始左滑距离为0
				selectWrap.addEventListener('scroll', function() {
					const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;//向下滚动距离
					const scrollL = this.scrollLeft - currentLeft;//左滑距离
					currentLeft = this.scrollLeft;
					// 当纵向滑动到底部，且横向不滑动时，触发滚动事件
					if (scrollDistance <= 0 && scrollL == 0) {
						binding.value();
					}
				});

			},
		});

2、在 el-table 中调用loadmore指令: v-loadmore=“loadMore”

通过loadmore指令，加载loadMore事件

<el-table   v-loadmore="loadMore" :data="table.data" border size="small">

table: {
                data: [],// 表格数据
                query: {
                    pageSize: 20,
                    currentPage: 1,
                },
                total: 0,//表格数据记录量
            },

loadMore方法 很多页面要用到滚动加载，提取公共方法 loads().

 //滚动加载
            loadMore(){
                loads(this.table,'url接口',this.$message);
            },

3、加载数据loads()

pageSize: 20，默认加载第一页数据20条，当滚动到底部时，加载页数+1，

function loads(table,url,msg) {
    if(!table || url == '') return "";
    if(table.query.currentPage == 1 && (table.data.length < table.total){
        table.query.currentPage++
    }
    table.loading = true;
    axios.post(ctx + url, urlEncode(table.query).slice(1)).then(res => {
        table.loading = false;
        var size = table.data.length + res.data.length;   //当前表格记录量加上新获取到的数据量
        if(size <= res.total){   //如果小于数据总量，则加载1页到表格中，否则给出提示信息
            table.query.currentPage++;
            table.data = table.data.concat(res.data);
        }else{
            msg.warning("到底了，没有更多数据了！");
        }
        return table.data;
    }).catch(error => {
        table.loading = false;
    });
}