由于el-table组件没有直接的滚动事件监听接口,我们可以通过操作DOM元素来添加滚动事件监听器。通常,我们可以监听el-table的滚动容器元素。 以下是一个使用Vue的mounted钩子来监听el-table滚动事件的示例代码: vue <template> <div> <el-table ref="myTable" :data="tableData" style="width: ...
方法1、在el-table上手动添加滚动条 1、在el-table上方添加一个div,div的宽度和表格的宽度相同。 <div ref="topScroll" class="top-scroll"> <div class="top-scroll-content" :style="{ width: topScrollWidth }"></div> </div> <el-table ref="tableRef" :data="list" v-loading.body="listLoad...
监听滚动事件:当滚动容器滚动时,重新计算可视区域,并更新渲染的数据。 四、el-table虚拟滚动的实现 要在el-table中实现虚拟滚动,你可以采用以下两种方式: 使用第三方库:如vue-virtual-scroller、vue-virtual-collection等,这些库提供了虚拟滚动的实现和API,你可以直接集成到你的项目中。 自定义实现:如果你希望更灵活...
一、需求 vue 中 elementUI el-table 实现滚动加载,场景:当表格需要显示大量数据时,又想通过一页来进行展示数据。 二、实现方法 a、监听表格对应的滚动条 当表格滚动条到达底部时,通过监听触发加载下一页的方法。 b、代码实现 关键代码如下: 复制代码 //获取表格对象let dom = document.querySelector(".el-tab...
this.$refs.multipleTable.bodyWrapper.addEventListener('scroll',(res)=>{constheight=res.targetconstclientHeight=height.clientHeightconstscrollTop=height.scrollTopconstscrollHeight=height.scrollHeightif(clientHeight+scrollTop===scrollHeight&&this.listStatus){this.listQuery.pageNo++this.listAuthPage()}},true)...
业务需求,需要做上拉加载效果 <el-tablev-loading="false":data="list"ref="table"borderstripe:height="800"></el-table> mounted(){// 监听table 滚动条let tableBodyDom=this.$refs.table.bodyWrapper tableBodyDom.addEventListener('scroll',()=>{// 滚动条总高度 减去 窗口高度 减去 已卷入的高度 小...
代码如下,我直接放类里面了,具体targetTableWrapperEl是哪个dom可以自己看一下具体的dom结构,表格的容器,因为宽度不变,所以滑块的宽度我们通过可滚动距离和容器宽度换算成一个百分比 因为el-table初始化的问题,初始化计算的时候最好做个延迟,或者监听宽度变化重设宽度,这里我实际代码两个都做了 ...
("scrollId").clientHeightconst scroll = scrollHeight -clientHeight//滚动长度为0if(scroll === 0) {return}}//触发滚动方法this.scrollFun()//去除点击监听window.document.removeEventListener('click',this.pauseScroll)//重设点击监听window.document.addEventListener('click',this.pauseScroll,false)},pause...
// 解除监听 this.bodyWrapperScrollbar.removeEventListener('scroll', this.syncPostion, {passive: true}); }, syncPostion: throttle(20, function() { // 把原来的注释掉,这句是用来根据table-body滑动滚动条时获取滚动信息,用来同步表头滚动的
原理:两个滚动条滚动时,同时控制另一个滚动条滚动。 表格上下滚动条监听滚动距离 上下滚动条 ---滚动距离双向绑定 html: <divclass="top-scroll"ref="topScroll"><divclass="top-scroll-content":style="tableWidth"></div></div><el-tableref="tableData2":data="tableData"class="e-table"@selection-...