element UI 表格做下滑滚动效果，请求接口数据

element UI 表格做下滑滚动效果，请求接口数据，内容记录

import { ElMessage } from "element-plus"; // vue3.0 引入方式// 定义横向滚动条的初始值
let arr = [0];
// 表格无限滚动加载
const InfiniteScroll = function(fn, obj , cls, index) {let table_body = document.getElementsByClassName(cls)[index];table_body.addEventListener("scroll", () => {arr.push(table_body.scrollLeft);if(arr[arr.length-1] != arr[arr.length-2]) {arr = [arr[arr.length-1]];return;} else {arr = [arr[arr.length-1]];};const scrollDistance = table_body.scrollHeight - table_body.scrollTop - table_body.clientHeight;if(scrollDistance <= 0) {if(!obj.loading) {obj.loading = true;obj.pageNum++;if(obj.total <= obj.tableData.length){obj.loading = false;ElMessage.warning('暂无更多数据');return;};fn();};};});
};let search = {pageNum: 1, // 必传pageSize: 9, // 必传total: 0, // 必传loading: false, // 必传tableData: [], // 必传
},// 调用
InfiniteScroll(() => {// 接口请求},search, // 参数"el-table__body-wrapper", // element UI 表格dom的类型0, // 类名下标
);

element UI 表格做下滑滚动效果，请求接口数据相关推荐

python数据接口获取数据_python UI自动化实战记录二：请求接口数据并提取数据
该部分记录如何获取预期结果-接口响应数据,分成两步: 1 获取数据源接口数据 2 提取后续页面对比中要用到的数据并且为了便于后续调用,将接口相关的都封装到ProjectApi类中. 新建python ...
element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...
element ui表格中的algin属性无效
我们在使用element ui表格中,经常需要调整表格内容的文字对齐位置,例如: 文档中描述是使用algin="left / right / center"调整文字对齐,但是我们使 ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
element ui表格data搜索重置功能
element ui表格搜索重置功能本地 1.html <el-input v-model.trim="inputname"></el-input> &l ...
《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
element UI表格绑定动态数据与selection复选操作
element UI表格绑定动态数据与selection复选操作的坑案例介绍:此案例是要求完成对客户的批量删除功能,因为客户有多条数据所以要结合分页组件来实现,并且批量删除按钮默认是禁用的,当有数据 ...

element UI 表格做下滑滚动效果，请求接口数据

element UI 表格做下滑滚动效果，请求接口数据相关推荐

最新文章

热门文章