【VUE】element-ui表格 实现滚动到底部加载更多数据

最新推荐文章于 2024-06-06 14:59:16 发布
最新推荐文章于 2024-06-06 14:59:16 发布
阅读量6.4k 收藏 28
点赞数 4
分类专栏： Vue 文章标签： vue.js ui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dan1374219106/article/details/121940567
版权

文章目录

背景

调用某系统的远程接口并不支持分页，但是支持分页查询，也就是说分页查了但是不给你返回total数量，你说这是有多坑！！
商量无果，因此解决办法就是我这个后端工程师去实现滚动加载报表的功能…

问题

在element-ui的文档中，存在这么一个指令v-infinite-scroll，但是实际用下来发现，指令只能作用于当前绑定的元素上 文档

初步实现-DEMO

经过我一番搜索，找到了一篇真的不错的文章:
element-ui表格 实现滚动到底部加载更多
这篇文章基本上可以解决我的问题，但是在实操过程中，会发现作者写的滚动到底部加载，会有自适应问题，因此我这边调整了一下distance的参数就解决了。

我这边整了一个element的demo，可以直接拷贝使用：

<template>
<!-- 滚动加载 -->
    <div class="wrap">
	  	<el-table
			height="600"
		  	:data="visibleData"
		  	style="width: 100%"
			v-load-more.expand="{func: loadmore, target: '.el-table__body-wrapper', delay: 300}"
			:load-more-disabled="disabledLoad">
            <el-table-column
				prop="id"
				label="ID">
		  	</el-table-column>
		 	<el-table-column
				prop="date"
				label="日期">
		  	</el-table-column>
			<div slot="append" style="text-align:center;">{{content}}</div>
    	</el-table>
	  </div>
</template>
<script>

const debounce = function (func, delay) {
    let timer = null
    return function () {
        if (timer) clearTimeout(timer)
        timer = null
        let self = this
        let args = arguments
        timer = setTimeout(() => {
            func.apply(self, args)
        }, delay)
    }
}

export default {
    data () {
		return {
			visibleCount: 30,
			tableData: [],
            content: '滚动到底部加载更多'
		}
	},
    created() {
		let count = 120
		while(count >= 0) {
			count--
			this.tableData.push({
                id: count,
				date: "2016-05-02"
			})
		}
	},
    computed: {
		// 是否禁止无限加载
		disabledLoad() {
			return false
		},
			
		visibleData() {
			return this.tableData.slice(0, Math.min(this.tableData.length, this.visibleCount))
		}
	},
	
	directives: {
		'load-more': {
			bind (el, binding, vnode) {
				const { expand } = binding.modifiers
				// 使用更丰富的功能，支持父组件的指令作用在指定的子组件上
				if (expand) {
					/**
					 * target 目标DOM节点的类名
					 * distance 减少触发加载的距离阈值，单位为px
					 * func 触发的方法
					 * delay 防抖时延，单位为ms
					 * load-more-disabled 是否禁用无限加载
					 */
					let { target, distance = 1, func, delay = 200 } = binding.value
					if (typeof target !== 'string') return
					let targetEl = el.querySelector(target)
                    console.info(targetEl)
					if (!targetEl) {
						console.log('Container Not Found')
						return
					}
					binding.handler = debounce(function () {
						const { scrollTop, scrollHeight, clientHeight } = targetEl
						let disabled = el.getAttribute('load-more-disabled')
						disabled = vnode[disabled] || disabled

						if (scrollHeight <= scrollTop + clientHeight + distance) {
							if (disabled) return
							func && func()
						}
					}, delay)
					targetEl.addEventListener('scroll', binding.handler)
				} else {
					binding.handler = helper.debounce(function () {
						const { scrollTop, scrollHeight, clientHeight }  = el
						if (scrollHeight === scrollTop + clientHeight) {
							binding.value && binding.value()
						}
					}, 200)
					el.addEventListener('scroll', binding.handler)
				}
			},

			unbind (el, binding) {
				let { arg } = binding
				// 使用更丰富的功能，支持父组件的指令作用在指定的子组件上
				if (arg === 'expand') {
					/**
					 * target 目标DOM节点的类名
					 * offset 触发加载的距离阈值，单位为px
					 * method 触发的方法
					 * delay 防抖时延，单位为ms
					 */
					const { target } = binding.value
					if (typeof target !== 'string') return
					let targetEl = el.querySelector(target)
					targetEl && targetEl.removeEventListener('scroll', binding.handler)
					targetEl = null
				} else {
					el.removeEventListener('scroll', binding.handler)
					el = null
				}
			}
		}
	},
	
	methods: {
		loadmore () {
			console.log('滚动到底部了')
			this.visibleCount += 10
            if(this.visibleCount >= this.tableData.length){
                this.content = '暂无更多数据'
            }
		}
	}
}
</script>

最终升级版本-表格滚动组件

我在想，这个表格滚动加载实现起来并不轻松，如果可以抽象成一个组件来使用，会更加灵活。
因此在上面demo的基础上我做了一些改动：

  1. 动态加载表格列
  2. 自定义初始化数量
  3. 不在初始化的时候加载全部数据，而是在滚动到底部的时候进行加载

组件代码scrollTable.vue

<!-- 滚动加载表格组件 -->
<template>
    <div class="wrap">
	  	<el-table
			height="600"
		  	:data="visibleData"
		  	style="width: 100%"
			v-load-more.expand="{func: loadmore, target: '.el-table__body-wrapper', delay: 300}"
			:load-more-disabled="disabledLoad">
            <!-- 动态列表格 -->
            <el-table-column :prop="index" :label="item" sortable v-for="(item, index) in tableHeader"
                       :key="index">
            </el-table-column>
            <!-- 底部文案 -->
			<div v-if="visibleData.length>=15" slot="append" style="margin-top:10px; margin-bottom:10px; text-align:center; font-size:15px ">{{content}}</div>
    	</el-table>
	  </div>
</template>
<script>

const debounce = function (func, delay) {
    let timer = null
    return function () {
        if (timer) clearTimeout(timer)
        timer = null
        let self = this
        let args = arguments
        timer = setTimeout(() => {
            func.apply(self, args)
        }, delay)
    }
}

export default {
    props:{
        //表格列信息
        tableHeader: {
            type: Object,
            required: true
        },
        //表格数据 注意需要增量（第一次是30条 第二次为30+10条....）
        tableData: {
            type: Array,
            required: true
        },
        //用于下拉查询新一页的数据信息 入参（页码，页数大小）
        method: { 
            type: Function
        },
        //初始行数（最好不要小于当前页面size，否则滚动下载有失效的可能，且size必须为10的倍数）
        initCount: {
            type: Number,
            required: true
        }
    },
    mounted() {
       
    },
    data () {
		return {
			visibleCount: 30,
            content: '滚动到底部加载更多',
            pageIndex: 1,
            pageSize: 10,
        }    
	},
    created() {
        console.info("创建了...")
        this.visibleCount = this.initCount
        this.pageIndex = this.initCount/this.pageSize
	},
    computed: {
		// 是否禁止无限加载
		disabledLoad() {
			return false
		},
		
		visibleData() {
			return this.tableData.slice(0, Math.min(this.tableData.length, this.visibleCount))
		}
	},
	
	directives: {
		'load-more': {
			bind (el, binding, vnode) {
				const { expand } = binding.modifiers
				// 使用更丰富的功能，支持父组件的指令作用在指定的子组件上
				if (expand) {
					/**
					 * target 目标DOM节点的类名
					 * distance 减少触发加载的距离阈值，单位为px
					 * func 触发的方法
					 * delay 防抖时延，单位为ms
					 * load-more-disabled 是否禁用无限加载
					 */
					let { target, distance = 1, func, delay = 200 } = binding.value
					if (typeof target !== 'string') return
					let targetEl = el.querySelector(target)
					if (!targetEl) {
						console.log('Container Not Found')
						return
					}
					binding.handler = debounce(function () {
						const { scrollTop, scrollHeight, clientHeight } = targetEl
						let disabled = el.getAttribute('load-more-disabled')
						disabled = vnode[disabled] || disabled

						if (scrollHeight <= scrollTop + clientHeight + distance) {
							if (disabled) return
							func && func()
						}
					}, delay)
					targetEl.addEventListener('scroll', binding.handler)
				} else {
					binding.handler = helper.debounce(function () {
						const { scrollTop, scrollHeight, clientHeight }  = el
						if (scrollHeight === scrollTop + clientHeight) {
							binding.value && binding.value()
						}
					}, 200)
					el.addEventListener('scroll', binding.handler)
				}
			},

			unbind (el, binding) {
				let { arg } = binding
				// 使用更丰富的功能，支持父组件的指令作用在指定的子组件上
				if (arg === 'expand') {
					/**
					 * target 目标DOM节点的类名
					 * offset 触发加载的距离阈值，单位为px
					 * method 触发的方法
					 * delay 防抖时延，单位为ms
					 */
					const { target } = binding.value
					if (typeof target !== 'string') return
					let targetEl = el.querySelector(target)
					targetEl && targetEl.removeEventListener('scroll', binding.handler)
					targetEl = null
				} else {
					el.removeEventListener('scroll', binding.handler)
					el = null
				}
			}
		}
	},
	
	methods: {
		async loadmore () {
			console.log('滚动到底部了')
            this.pageIndex++
            await this.method(this.pageIndex ,this.pageSize)
            this.visibleCount += 10
            if(this.visibleCount > this.tableData.length){
                this.content = '暂无更多数据'
            }
		},
	}
}
</script>

使用方式：
因为涉及到公司业务代码，因此我这里把业务代码去掉了（伪代码，不能直接copy运行）

<template>
  <div>
    <div class="container">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <!-- 查询条件 -->
        <!----------------->
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :loading="loading">查询</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 动态加载数据 -->
      <scroll-table v-if="hackReset" :tableHeader="tableHeader" :tableData="tableData" :method="scrollMethod" :initCount="initCount"></scroll-table>
    </div>
  </div>
</template>

<script>
import scrollTable from '../share/scrollTable';
export default {
  name: 'StockPage',
  components:{
    scrollTable
  },
  data() {
    return {
      query: {
        info: '',
      },
      //表头
      tableHeader:{
        id: "ID",
        date: "日期",
        page: 1,
        size: 20
      },
      //表数据信息
      tableData:[], //当前查询条件分页累加数据信息
      dataList:[], //分页查询数据信息
      initCount:20, //初始化行数
      hackReset: true,//重新刷新子组件渲染
    }
  },
  created() {
  },
  methods: {
    //查询
    handleSearch() {
      //点击查询，需要重新渲染组件
      this.rebuileComponents()
    },
    //动态加载表数据方法
    async scrollMethod(pageIndex, pageSize){
      this.query.page = pageIndex
      this.query.size = pageSize
      if(this.checkQuery()){
        let result = await findPage(this.query)
        if (result) {
              this.dataList = result.list
              //累加
              if(this.dataList.length>0){
                  let i =0 ;
                  for(i;i< this.dataList.length ;i++){
                      this.tableData.push(this.dataList[i])
                  }
              }
            }
        }
      } 
    }, 
    //校验
    checkQuery(){
      //校验查询条件
      return true;
      
    },
    //强制重新加载子组件
    rebuileComponents() {
      // 销毁子标签
      this.hackReset = false;
      // 重新创建子标签
      this.$nextTick(() => {
        this.hackReset = true;
      });
    },
    //重置
    async handleReset() {
      
    },
}
</script>

<style scoped>

</style>

如果文章对你有帮助，不要忘了给我点个赞吼(￣▽￣)~
欢迎关注我的微信公众号：松鼠技术站

_陈同学_
关注
  • 4
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementUI el-table 默认滚动条在表格的最底部
grootbaby
11-07 3256
elementUI 框架，获取不到表格里面的某个元素的 id，但是 el-table 里有个 bodyWrapper 它指向的是 el-table 的表格内容部分，存在 scrollTop，scrollHeight 属性，所以可以用下面方法来实现滚动条在底部的效果。（备注： 需给对应的el-table 设置ref 属性，，本案例中ref 设置为editTable）另外，如果要在不同屏幕下表格高度需要适应屏幕的话，需要用到 window.onresize 函数。
监听element-ui table滚动事件的方法
10-17
本文将详细介绍如何监听Element-UI的Table组件的滚动事件，以便在用户滚动到表格底部时动态加载更多数据。 ### 背景 在大数据展示场景中，为了提高页面性能和用户体验，通常会采用分页或无限滚动的方式来加载数据。...
Element UI - v-infinite-scroll无限滚动组件
共同进步
06-01 2657
在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。 Element UI - v-infinite-scroll无限滚动组件
vue+elementUI实现表格滚动加载
weixin_42059584的博客
12-13 1392
vue+elementUI实现表格滚动加载
【VUE】el-table表格 实现滚动到底部加载更多数据
最新发布
cdd9527的博客
06-06 552
【VUE】el-table表格 实现滚动到底部加载更多数据
vue使用el-menu、el-table当有滚动条时滑动到最底部
m0_63701303的博客
12-06 913
vue使用el-menu、el-table当有滚动条时滑动到最底部
Vue自定义指令监听el-table的滚动事件，滚动到底部加载更多数据
林中明月间丶
09-26 8001
Vue自定义指令监听el-table的滚动事件，达到滚动条滚动到底部加载新数据
el-table-infinite-scroll实现Element表格数据无限加载
qq_43718377的博客
07-05 1512
【代码】el-table-infinite-scroll实现Element表格数据无限加载。
vue element-ui table表格滚动加载方法
08-27
在本文中，我们将探讨使用 Vue 和 Element-UI 实现表格滚动加载的方法。本方法可以帮助开发者实现表格的无限滚动加载，提高用户体验。 一、添加全局注册事件 在实现表格滚动加载之前，我们需要添加一个全局注册...
vue-element-table:一款基于element-ui封装的基于JSON配置的表格，支持分页，按钮，行编辑等等功能
03-20
经常会开发大量的表格，但是直接使用element-ui的原生组件时候，既写法繁琐，而且本身并不本身分页，行编辑，顶部按钮等等功能，需要通过插槽或多个组件组合才能实现，本项目是基于element-ui二级封装的表格，具体...
vue指令做滚动加载和监听等
10-16
在这个例子中，`loadMore`方法会在用户滚动到底部时被调用，你可以在这里执行加载更多数据的逻辑，比如向服务器发送请求获取新的选项，并将它们追加到当前的`options`数组中，以实现分页加载的效果。 总结起来，Vue...
vue elementUI table表格数据 滚动懒加载的实现方法
10-17
主要介绍了vue elementUI table表格数据滚动懒加载的实现方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
基于vue element ui 的动态table组件
06-03
- **懒加载**：如果数据量巨大，可实现按需加载，用户滚动到表格底部时才加载更多数据。 - **服务端排序和筛选**：对于复杂或性能敏感的排序和筛选操作，可以将这些任务交给服务器处理，减轻客户端负担。 5. **...
elementUI中的 el-table 实现虚拟滚动
Hyanl的博客
03-02 6962
解决该问题主要是用虚拟滚动的思路。引发页面卡顿的原因主要是由于数据量太大导致渲染的 dom 较多，然后页面就卡顿了。使用了 elementUI 中的 el-table 组件，不使用分页，当表格数据过多时导致页面卡顿；下面使用 element 中的 el-table 实现一下虚拟滚动来解决这个问题。
vue elementui中使表的滚动条 滚到顶部或底部
u012970538的博客
09-14 2406
1.设置table的ref为tableList。
el-table 横向滚动条固定在可视窗口底部
热门推荐
ZMJ_QQ的博客
04-21 3万+
有一个需求,当el-table的宽度超出浏览器宽度时，虽然el_table底部会出现滚动条，但是每次需要先滚动到底部，才能使用el-table的滚动体，很是麻烦。因此当el_table的宽度超出屏幕宽度时，要在可视范围底部添加一个横向的滚动条，在网上找了四篇不同方法，全都试了一遍，四个方法的原文地址以及效果图我都贴出来了，看个人选择了，我自己用的第二个，一个大佬写的。...
vue-seamless-scroll滚动
每一次跌倒都是为了华丽的站起来。
02-16 2930
vue-seamless-scroll使用-table表格滚动
Vue中滚动插件vue-seamless-scroll的安装与使用
qq_44659327的博客
09-02 2172
npm安装： npm install vue-seamless-scroll --save 页面中引入组件： import vueSeamlessScroll from 'vue-seamless-scroll' 页面中调用组件： components: { vueSeamlessScroll }, 在页面的computed中定义变量 computed: { classOption () { return { step: 0.4, // 数
vue3+element-ui实现el-table表格组件自动循环滚动
04-26
对于实现el-table表格组件自动循环滚动，可以使用element-ui提供的scroll组件，并设置它的属性为loop：true。具体实现步骤如下： 1. 在template中使用el-table组件，并设置属性fixed-layout和height，fixed-layout为true时，固定表格布局，height设置表格的高度。 2. 在el-table标签内部，使用el-scrollbar组件，设置其属性v-model和noresize，其中v-model为当前滚动位置，noresize为禁止重新调整尺寸。 3. 在el-scrollbar内部使用el-table-column组件，设置表格的列信息，并填充数据。注意：表格的列宽需固定，否则会影响滑动效果。 4. 最后，在el-table组件中使用el-table-column定义的列信息，呈现数据。 实现以上步骤后，即可得到一个自动循环滚动的el-table表格组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值