el-table实现懒加载(el-table-infinite-scroll)

这篇具有很好参考价值的文章主要介绍了el-table实现懒加载(el-table-infinite-scroll)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

2023.8.15今天我学习了用el-table对大量的数据进行懒加载。

效果如下:

el-table实现懒加载(el-table-infinite-scroll),vue.js,javascript,elementui

 el-table实现懒加载(el-table-infinite-scroll),vue.js,javascript,elementui

1.首先安装:
 

npm install --save el-table-infinite-scroll@2

2.全局引入:

import ElTableInfiniteScroll from "el-table-infinite-scroll";

// 懒加载
Vue.directive("el-table-infinite-scroll", ElTableInfiniteScroll);

3.页面使用:

<template>

  <div>

      <el-table    v-el-table-infinite-scroll="load">
         //相关内容
       </el-table>

      //提示框内容
      <el-alert v-if="isflag" title="正在努力加载中..." type="success" center :closable="false" show-icon/>
      <el-alert v-if="isMore" title="没有更多啦!" type="warning" center show-icon/>

  </div>

</template>

<script>
 export default{
   data(){
     return{
       start: 10,//截取数据的开始位置
       end: 20,//截取数据的结束位置
       isflag: false,//显示加载中提示的动画
       isMore: false,//显示没有过多提示的动画
     },
   methods:{
     load() {
        this.isMore = false;//默认为false
        this.isflag = true;
        if (this.isflag) {
              //判断现有表格数据长度是否和全部数据长度一样,不一样的话就进行截取
           if (this.slice_bed_data_list.length != this.all_bed_data_list.length) {
              this.slice_bed_data_list = 
            this.slice_bed_data_list.concat(this.all_bed_data_list.slice(this.start, 
               this.end));
             //每次截取十条数据,截取位置每次都增加10,也可以采用每次截取前十条数据然后删除总数组的前十条数据,这样每次截取的数据就是最新的十条数据。
              this.start = this.start + 10
              this.end = this.end + 10
        } else {
          setTimeout(() => {
            this.isMore = true;
            setTimeout(() => {
              this.isMore = false;
            }, 2000);
          }, 2000);//显示没有过多提示的效果,2秒后消失
        }
        setTimeout(() => {
          this.isflag = false
          this.isMore = false
        }, 1000)//所有提示都消失
      }
    },
  }
 }
 }

</script>

如果大家有不懂的地方可以参考:

1.vue—在el-table上实现懒加载效果_列表懒加载插件_迷路小灰灰的博客-CSDN博客

2.el-table-infinite-scroll - npm (npmjs.com) 文章来源地址https://www.toymoban.com/news/detail-650910.html

到了这里,关于el-table实现懒加载(el-table-infinite-scroll)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • El-table 懒加载表格中新增、删除遇到的问题

    我是用的版本是: 官方给的例子中只是一个单纯的展示,但实际需求中可能会有一些其他需求,比如新增、修改。 然后遇到了各种问题,因此记录一下。 :tree-props=\\\"{ children: \\\'children\\\', hasChildren: \\\'hasChildren\\\' }\\\" ,先说一下配置 从下图可以看到,懒加载方法只执行了一次。当你手

    2024年02月12日
    浏览(50)
  • 【性能优化】虚拟懒加载(下拉滚动加载长列表)element-puls+el-table

    提示:这里可以添加本文要记录的大概内容: 在element-plus中,如果数据超过1k,就会感觉到明显的卡顿,应该是渲染的卡顿吧。反正我在请求回来接口之后,loading,会卡顿。用户体验十分不佳。然后吧,这个列表还不能分页,得全部展示出来,因为设计的,不能改,上面要求

    2024年02月07日
    浏览(44)
  • 【vue+el-table+el-backtop】表格结合返回顶部使用,loading局部加载

    效果图: 一. 表格结合返回顶部 二. 局部loading 解决方法: target绑定滚动dom的父元素类名就可以了. 1.如果你的表格是 固定表头 的,那滚动dom的父元素类名就是 el-table__body-wrapper 如图: 2.如果你的表格不是固定表头,表头跟随内容一起滚动的,那滚动dom的父元素类名就是 el-table 如图

    2024年02月13日
    浏览(48)
  • vue的element ui使用el-table组件实现懒加载树、默认自动展开层级(一层,二层)、并且解决新增、删除、修改之后树节点不刷新问题

    问题 :数据量太大了,导致接口返回数据时间较长。 解决 : 将ElementUi中Table组件加载改为懒加载(查看文档)。 思路 :初始化打开页面时只显示第一级菜单,用户点击展开菜单之后往后端发送请求,然后加载出一级子菜单;后台只用有一个根据菜单id查询他子菜单的接口就可以

    2024年01月16日
    浏览(41)
  • 解决el-table数据量过大(上万条)加载及复选框选择卡顿问题

    需要用到umy-ui组件及虚拟表格。 安装: 引用: 1,数据量加载卡顿问题。 把el-table改成u-table。 把el-table-column改成u-table-column。 u-table增加三个属性(必须): use-virtual,row-height,height,表示启用虚拟列表。  如此一来便可流畅加载上万条数据了。 2,复选框默认选择,全选卡顿

    2024年02月12日
    浏览(91)
  • el-table实现纯前端导出(适用于el-table任意表格)

    2023.9.1今天我学习了如何使用el-table实现前端的导出功能,该方法的好处有无论你的el-table长什么样子,导出之后就是什么样子。 1.安装三个插件 npm install file-save npm install xlsx npm install xlsx-style 2.创建Export2Excel.js 3.按需引入 4.vue.config.js引入 效果: 扩展: 当我们会出现这样的表

    2024年02月10日
    浏览(50)
  • element-ui的树形表格el-table懒加载lazy子节点修改数据后局部刷新

    在使用element-ui的树形表格(el-table)懒加载(lazy),并使用了懒加载,出现了一个问题,在对当前节点添加、修改、删除一个子节点数据时,当前节点的子节点数据并不自动刷新出来。element-ui官方没有提供子节点修改数据后局部刷新方法。 首先,在data(){}中定义一个maps:new Map();

    2024年02月12日
    浏览(49)
  • 【详解|彻底搞懂el-table和列表过滤】vue列表过滤和el-table的实现

    vue列表过滤 el-table的理解 先来看一段代码: chatGPT 的理解真的很6: 这段代码使用了 Element UI 的组件,创建了一个表格列组件 el-table-column,并为它设置了一些属性和插槽。 各种属性: 名称 作用 prop 指定了该列绑定的数据对象的属性名为 warehouseName label 指定了该列的列名为 “

    2024年02月11日
    浏览(45)
  • el-table实现指定列合并

    table 传入 span-method 方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行 row 、当前列 column 、当前行号 rowIndex 、当前列号 columnIndex 四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表 rowspan ,第二个元素代表 colspan 。 也可以返回一个键名为

    2024年02月13日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包