由于el-table的滚动区域通常位于.el-table__body-wrapper这个DOM元素内,我们需要在该元素上添加滚动事件的监听器。这可以通过在Vue组件的mounted生命周期钩子中执行相关DOM操作来完成。 编写滚动事件处理函数,判断滚动位置是否接近底部: 在滚动事件处理函数中,我们需要获取滚动容器的高度、滚动条的位置以及内容的高度,通过...
可用于所有下拉的情况,通过监听滚动条事件来记录,若当前滚动条等于0的情况为底部就进行数据获取 const timer = setInterval(() =>{ const dom= document.querySelector('.button-style');if(dom) { clearInterval(timer) console.log(dom); dom.addEventListener('scroll', (v) =>{ const scrollDistance= do...
方法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...
代码如下,我直接放类里面了,具体targetTableWrapperEl是哪个dom可以自己看一下具体的dom结构,表格的容器,因为宽度不变,所以滑块的宽度我们通过可滚动距离和容器宽度换算成一个百分比 因为el-table初始化的问题,初始化计算的时候最好做个延迟,或者监听宽度变化重设宽度,这里我实际代码两个都做了 /** * 自动设置Bar *...
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)...
vue 中 elementUI el-table 实现滚动加载 一、需求 vue 中 elementUI el-table 实现滚动加载,场景:当表格需要显示大量数据时,又想通过一页来进行展示数据。 二、实现方法 a、监听表格对应的滚动条 当表格滚动条到达底部时,通过监听触发加载下一页的方法。 b、
为el-table 全局注册自定义指令,用来监听 el-table 滚动到底部时的事件,在main.js中注册 bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper'); selectWrap.addEventListener('scroll', function () { if (this.scrollHeight - this.scrollTop <= this.clientHeight) { ...
因为初始化的问题,初始化计算的时候最好做个延迟,或者监听宽度变化重设宽度,这里我实际代码两个都做了 #滑块距离 具体代码, 原理同样是换算成百分比 #同步滚动距离 #table => scroller 直接在的事件里进行设置即可 #scroller =》table 分了两个情况,拖滑块 和 点击滑槽 ...
在loadMore方法中,你可以发送请求获取新的数据,然后将其添加到tableData中。 其中,v-infinite-scroll是el-table-infinite-scroll的指令,用于监听滚动事件并触发loadMore方法。infinite-scroll-disabled用于控制是否禁用滚动加载,可以通过修改disbledInfiniteScroll的值来实现。infinite-scroll-distance指定离底部多少像素触发加载...
<template> <div class="app"> <!-- 思路: 表格设置固定高度 默认加载10条数据 对表格容器进行滚动事件的监听,监听是否到达底部,如果到达底部则往表格追加数据 --> <h1>表格-懒加载</h1> <el-table :data="table_data" border style="width: 100%" height="400" ref="tableRef" > <el-table-column...