Elment ui 表单上滑 加载更多数据方法

本文主要是介绍Elment ui 表单上滑 加载更多数据方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 方法记录 方便以后使用

方法一：

 <template><div><el-table:data="tableData"height="calc(100vh - 300px)"ref="table":show-header="false"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></div>
</template>
<script>export default {data() {return {tableData: []}},destroyed() {// 清空监听window.removeEventListener('scroll', this.handleScroll, true);},mounted() {this.$refs.table.bodyWrapper.addEventListener('scroll', this.handleScroll, true);},methods: {handleScroll(res) {// 监听滚动事件const height = res.target;const clientHeight = height.clientHeight; // 表格视窗高度 即wraperconst scrollTop = height.scrollTop; // 表格内容已滚动的高度const scrollHeight = height.scrollHeight; // 表格内容撑起的高度if (clientHeight + scrollTop === scrollHeight) {if (this.isMoreLoad) {// 请求数据this.getData();}}},}
}
</script>

方法二： 推荐

当页面第一次tab页面切换时 mounted 拿不到表格dom时

调用addScrollEventListener() 添加滚动监听

离开时removeScrollEventListener() 移除监听

 data() {return {isMoreLoad: true,scrollEventListenerAdded: false,}
}， 
methods: {// 添加监听addScrollEventListener() {this.$nextTick(() => {if (!this.scrollEventListenerAdded) {document.querySelector('.el-table__body-wrapper').addEventListener('scroll', this.handleScroll, true);this.scrollEventListenerAdded = true; // 标记已添加监听器}});},// 移除滚动事件监听器的方法removeScrollEventListener() {this.$nextTick(() => {if (this.scrollEventListenerAdded) {document.querySelector.querySelector('.el-table__body-wrapper').removeEventListener('scroll', this.handleScroll, true);this.scrollEventListenerAdded = false; // 标记已移除监听器}});},handleScroll(res) {// 监听滚动事件const height = res.target;const clientHeight = height.clientHeight; // 表格视窗高度 即wraperconst scrollTop = height.scrollTop; // 表格内容已滚动的高度const scrollHeight = height.scrollHeight; // 表格内容撑起的高度if (clientHeight + scrollTop === scrollHeight) {if (this.isMoreLoad) {this.pageData.page++;this.getData();}}},
}

这篇关于Elment ui 表单上滑 加载更多数据方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---