el-table滚动分页模拟懒加载

目录

前言

一、组件介绍

二、表格组件

1.表头组件

2.表格整体代码

三、用法

总结

---

前言

在工作当中会遇到一些比较奇葩的需求，比如表格需要承载几千或上万条的数据并表示不要分页，所以针对这种需求制定了一个可以不需要分页的表格。

一、组件介绍

该组件是使用element-ui的el-table做的封装，理念就是将分页换了一种形式，使用滚动条模拟懒加载分页，其实万变不离其宗，本质上表格数据还是后台人员给分页过的，只不过就是将分页功能放到滚动条上执行，打破传统的点击分页按钮形式。

二、表格组件

1.表头组件

方便动态生成表格表头，因为我目前的项目中有多级表头的需求所以单独简单的封装一下

代码如下：

2.表格整体代码

该组件中有些插槽，为了方便表格设置标题或者一些按钮之类的功能做出的默认排版，如果不需要的可以看情况删除。

之前开发的过程中发现了一个被自己忽略的bug，就是如果滚动加载到最后一页这时候你的数据不足以支撑表格出现滚动条就没有办法再执行你的滚动事件，所以我就加了一个小功能，当该页是最后一页并且没有滚动条的时候会出现这个小按钮，点击会返回上一页。（如果大家有更好的办法解决这个问题希望可以分享交流学习一下）

代码如下：

在表格请求后调用了一个callback函数，这个函数的作用是当你在接口请求成功或者失败后想要再执行一些其他的逻辑，就在callback中处理，flag为true时是执行成功false为失败，info是接口返回数据。

三、用法

import sfTable from '@/components/sfLazyTable'

创建模板 components: {sfTable}

引用模板

如果后台返回数据不是分页形式，则需要在组件上设置isPage="true",tableDataBase="tableData"。

如果是分页形式的则注意接口路径tableDataUrl和请求类型method必须要设置正确

这两种形式的分页还需要注意表格总数total必须设置

前面说了，该组件的分页有两种形式，一种形式是后台分页，这种就只需要调用组件内的getData方法即可，参数是需要传入后台的参数。

另一种前端分页则不需要调用getData方法，需要自己通过axios来请求拿到数据，渲染的时候需要注意调用组件中chunk方法并在拿到数据后再调用creatLoadDom方法来创建load动画。

---

总结

这是小弟第一次发表文章，写的不是很详细，希望大家在看的同时尽量少一些吐槽多一些鼓励，也希望可以帮助到一些喜欢前端的朋友，小弟也是一个普普通通技术一般的搬砖族，希望可以和大家共同学习共同成长，多给小弟提提建议或指出一些问题，最后祝大家身体健康，年入百万。