el-table滚动懒加载，显示加载状态

效果图

• 1.添加自定义指令

// main.js
Vue.directive('tableScroll', {
    bind (el, binding) {
    	// el-table 内容滚动区域
        const bodyWrap = el.querySelector('.el-table__body-wrapper')
        bodyWrap.addEventListener('scroll', function () {
            let sign = 0
            // 滚动到底部
            const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
            if (scrollDistance <= sign) {
                binding.value()
            }
        })
    }
})

• 2.在你的el-table上绑定事件

<!--注意要设置高度-->
<el-table
	v-table-scroll="lazyLoad"
	ref="scrollTable"
	max-height="xxx" 
	...>
</el-tbale>

• 3.加载文字DOM节点

// 这里监听获取到数据渲染后，处理加载文字DOM节点
watch: {
	tableData: {
	    handler (val) {
	        if (val.length) {
	            this.$nextTick(() => {
	                let el = this.$refs.scrollTable.$el
	                const bodyWrap = el.querySelector('.el-table__body-wrapper')
	                // 我这里第一列固定，固定容器也要生成节点来对齐滚动容器
	                const fixedBodyWrap = el.querySelector('.el-table__fixed-body-wrapper')
	                let loadDiv = document.createElement('div')
	                let emptyDiv = document.createElement('div')
	                loadDiv.className = 'load-text'
	                emptyDiv.innerHTML = '.'
	                loadDiv.style.textAlign = 'center'
	                loadDiv.style.display = 'none'
	                emptyDiv.style.visibility = 'hidden'
	                const loadTextDom = el.querySelectorAll('.load-text')
	                // 未添加节点时添加
	                if (!loadTextDom.length) {
	                    loadDiv.innerHTML = this.page.totalPage > 1 ? '努力加载中(>ω<*)' : '人家是有底线的 (｡･ω･｡)'
	                    bodyWrap.appendChild(loadDiv)
	                    fixedBodyWrap.appendChild(emptyDiv)
	                }
	                // 已生成节点时处理
	                if (loadTextDom.length) {
	                    const loadText = el.querySelector('.load-text')
	                    loadText.style.display = 'none'
	                    loadText.innerHTML = this.page.totalPage > 1 ? '努力加载中(>ω<*)' : '人家是有底线的 (｡･ω･｡)'
	                }
	            })
	        }
	    },
	    deep: true
	}
}

• 4.lazyload触发处理

data () {
	// 分页
	page: {
		current: 1,
		pageSize: 20,
		total: 0,
		totalPage: 0
	}
},
method: {
	lazyLoad () {
		let el = this.$refs.scrollTable.$el
		let loadDiv = el.querySelector('.load-text')
		// loadSign标记 防止重复加载
		if (this.loadSign) {
			loadDiv.style.display = 'block'
			this.page.current++
			// 大于总页数时
			if (this.page.current > this.page.totalPage) {
				loadDiv.innerHTML = '人家是有底线的 (｡･ω･｡)'
				return
			}
			// 这里是接口函数
			this.getTableData()
		}
	},
	// 接口示例，这里以我这里接口返回的格式展示
	getTableData() {
		this.loadSign = false
		// API
		XXAPI().then(res => {
			this.loadSign = true
			if (res.data.code === 0) {
				let result = res.data.data
				this.tableData = this.tableData.concat(result.list)
                this.page.totalPage = Math.ceil(result.total / result.pageSize)
                ...
			} ...
		}).catch((() => {
			this.loadSign = true
		})
	}
}