el-table 组件本身并不直接支持滚动加载数据的功能,但你可以通过一些方法来实现这一需求。以下是一个详细的步骤说明,包含代码片段,用于实现 el-table 滚动加载数据的功能: 1. 实现滚动到底部时触发加载数据的功能 你可以通过监听 el-table 的滚动事件,来判断是否滚动到了底部。当滚动到底部时,触发加载数据的功能。
获取到当前滚动加载的el-table表格节点 注意的是 如果存在多个表格,用ref获取dom节点,需要指定为第一个, 并且是当前dom节点下的bodyWrapper元素, 然后给这个元素添加滚动事件 this.$nextTick(function(){ var dom =this.$refs[`personTable_${that.scrollTableId}`]; var tableBodyEle = dom[0].bodyWrapper; ...
<el-table-columntype="selection":reserve-selection="true"width="55"></el-table-column> <el-table-columnprop="date"label="日期"width="180"></el-table-column> <divslot="append"style="text-align: center;">滚动到底部加载更多</div> </el-table> </div> </template> <script> constdebounc...
一、需求 vue 中 elementUI el-table 实现滚动加载,场景:当表格需要显示大量数据时,又想通过一页来进行展示数据。 二、实现方法 a、监听表格对应的滚动条 当表格滚动条到达底部时,通过监听触发加载下一页的方法。 b、代码实现 关键代码如下: 复制代码 //获取表格对象let dom = document.querySelector(".el-tab...
在el-table上如何实现无限滚动加载? el-table无限滚动加载的性能优化有哪些? 如何判断el-table的无限滚动加载是否完成? 一、安装插件 npm install --save el-table-infinite-scroll 二、全局引用 代码语言:javascript 复制 import Vue from 'vue'; import elTableInfiniteScroll from 'el-table-infinite-scroll';...
一、自定义指令实现参考:vue element-ui table表格滚动加载template <template> <el-table size="mini" :height="height" highlight-current-row v-loading="loading" v-loadmore="loadMore" :data="tableData" > <slot></slot> <template slot="append"> <div class="no-more"> 我~是有底线的 (～~▽...
在处理大量数据时,使用el-table-infinite-scroll插件可以帮助实现无限滚动加载的效果。对于2000条数据,你可以按照以下步骤使用el-table-infinite-scroll插件: 1. 安装el-table-infinite-scroll插件: 2. shell复制代码 npm install --save el-table-infinite-scroll 1. 在Vue项目中全局引入el-table-infinite-scroll插件...
在loadMore方法中,你可以发送请求获取新的数据,然后将其添加到tableData中。 其中,v-infinite-scroll是el-table-infinite-scroll的指令,用于监听滚动事件并触发loadMore方法。infinite-scroll-disabled用于控制是否禁用滚动加载,可以通过修改disbledInfiniteScroll的值来实现。infinite-scroll-distance指定离底部多少像素触发加载...
基于el-table-infinite-scroll实现表格数据无限加载的功能 - 书香学编程于20211014发布在抖音,已经收获了2098个喜欢,来抖音,记录美好生活!
el-table__body-wrapper`) let {scrollHeight, scrollTop, clientHeight} = selectWrap if(scrollHeight == scrollTop + clientHeight){ if(this.pageParams.total > this.tableListData.length){ this.pageParams.pageNo = this.pageParams.pageNo? Number(this.pageParams.pageNo) + 1: 1 this.getData()...