Vue Element表格实现滚动加载_element表格滚动加载-程序员宅基地

技术标签: 大前端  Vue  Element  JS  el-table  滚动加载  

需求背景

最近有个需求,需要根据用户输入的数字,生成对应行数的表格数据,比如输入10,那就是要生成一个10行的表格,1000就是1000行,表格内容不算复杂,感觉还是一个蛮简单的需求,谁知做着就发现问题了。就是当输入的数字超过1000的时候,明显感觉表格加载的有点卡顿,于是开始寻找解决之法。

解决思路

首先查看生成1000行表格数据所需的时间,由于计算过程是由js实现的,所以可以用

console.time('time')
console.timeEnd('time');

来查看代码执行耗时,timetimeEnd成对出现,保持里面的参数一致即可。打印出来看到,生成1000条记录仅需6.5ms,
在这里插入图片描述
这~~~~~,还以为是计算的慢,看来和计算过程问题不大了,这里直接说影响问题的原因。

其实是Element渲染表格耗时太久,当我把输入数字调整到5000,计算也仅需30毫秒左右,而表格则需要等待2-3秒,知道是表格渲染的慢,那就换一种思路,一开始就加载100条,剩下的采用滚动加载的方式实现即可,下面的代码仅仅是一个示例代码,仅供参考。

实现代码

实现效果。
在这里插入图片描述
实现滚动加载需要添加一个包,el-table-infinite-scroll,使用npm或者cnpm 安装都行。

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

包安装好之后引入进来,然后在el-table下指定滚动加载需要执行的方法即可
v-el-table-infinite-scroll="getDataNextPage"
完整代码如下。

<template>
  <div style="width: 400px; margin: 0 auto">
    <el-button type="primary" size="mini" @click="initData">生成数据</el-button>
    <div style="margin-top: 10px">
      <el-table
        :data="data"
        style="width: 100%"
        max-height="400px"
        min-height="300px"
        border
        v-el-table-infinite-scroll="getDataNextPage"
      >
        <el-table-column
          prop="name"
          label="姓名"
          min-width="10%"
          align="center"
        ></el-table-column>
        <el-table-column prop="age" label="年龄" min-width="10%" align="center">
        </el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          min-width="10%"
          align="center"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import elTableInfiniteScroll from "el-table-infinite-scroll";
export default {
    
  name: "table",
  directives: {
    
    "el-table-infinite-scroll": elTableInfiniteScroll,
  },
  data() {
    
    return {
    
      data: [],
    };
  },
  created() {
    },
  methods: {
    
    initData() {
    
      console.time("time");
      for (let i = 0; i < 1000; i++) {
    
        let user = {
    
          name: "张三" + i,
          age: i,
          gender: i % 2 == 0 ? "男" : "女",
        };
        this.data.push(user);
      }
       console.timeEnd("time");
    },
    getDataNextPage() {
    
        setTimeout(() => {
    
          for (let i = 0; i < 50; i++) {
    
            let user = {
    
              name: "张三" + i,
              age: i,
              gender: i % 2 == 0 ? "男" : "女",
            };
            this.data.push(user);
          }
        }, 100);
    },
  },
};
</script>

study hard and make progress every day

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u012869793/article/details/124400241

智能推荐

草图大师SketchUp 2021 mac版 兼容macos11系统正式上线!_sketch up 有mac版本吗-程序员宅基地

文章浏览阅读3.9k次。草图大师2021 mac版是一款功能强大且完善的建筑草图设计软件,它能够帮助设计师快速的将3D模型进行创建并进行演示和分享,sketchup2021中文名为草图大师mac版,可以快速为用户创建三维创意。sketchup2021 mac版能够满足客户所有需求的三维建筑设计草图软件。从小细节到大部件SketchUp 2020 特别 for Mac都是非常完美处理的草图大师 2021 mac版可以快速为您进行汽车,人物,门窗等模型建造。草图大师SketchUp 2021 mac版SketchUp 20_sketch up 有mac版本吗

tf用法大全:tf.add、tf.subtract、tf.multiply、tf.scalar_mul、tf.div、tf.divide、tf.truediv、tf.flo-程序员宅基地

文章浏览阅读4.3k次。Arithmetic Operatorstf.add、tf.subtract、tf.multiply、tf.scalar_mul、tf.div、tf.divide、tf.truediv、tf.floordiv、tf.realdiv、tf.truncatediv、tf.floor_div..._tf.add

如何让一行文本显示一定的宽度,超出省略号代替_超出宽度省略号-程序员宅基地

文章浏览阅读1.7k次。#box{ width:100px; background-color:#87CEEB; padding:2px 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} fd之fa星旅馆有限公司系亚洲规模最大的综合性旅游企业集团_超出宽度省略号

盲人程序员如何编程?全靠每分钟450个单词-程序员宅基地

文章浏览阅读2.4k次,点赞11次,收藏4次。昨天有人给我发了一篇文章,我一看到图就觉得很奇怪,这个人坐在一个小隔间里,戴着耳机,敲着键盘,但是他的面前却没有屏幕, 他在干什么?他叫Tuukka Ojala, 是一个..._盲人如何编程

使用vue-pdf 给pdf加水印_vue pdf加水印-程序员宅基地

文章浏览阅读2.2k次。代码】使用vue-pdf 给pdf加水印。_vue pdf加水印

「 LaTex 」写论文,修改公式内行距的方法_\vspace设置段落行距-程序员宅基地

文章浏览阅读3.4k次。一.前言在官网给的LaTex模板里作业,有时会遇到带有分式或大括号的公式顶端重叠的问题,下面给出解决方法。二.技术实现使用临时修改行距指令\vspace{0.5ex}*{0.5ex}中的数字可以任意调整。三.实例展示修改前如图:修改后如图:*亲测有效..._\vspace设置段落行距

随便推点

JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误-程序员宅基地

文章浏览阅读55次。下载了最新的JUnit版本,是4.11,结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误,上网查了一下,一般的解决方案是,换一个低一点的版本就好了。还有人说,是缺少hamcrest的包。去官网又看了一下,结果发现这样一段话:junit.jar: Includes the Hamcres..._电脑出现订单4.11可使用什么原因

Java自然语言处理 LingPipe-程序员宅基地

文章浏览阅读486次。LingPipe是一个自然语言处理的Java开源工具包。LingPipe目前已有很丰富的功能,包括主题分类(Top Classification)、命名实体识别(Named Entity Recognition)、词性标注(Part-of Speech Tagging)、句题检测(Sentence Detection)、查询拼写检查(Query Spell Checking)、兴趣短语检测(Int..._tokenizerfactory tokenizer_factory = indoeuropeantokenizerfacto

BW文件格式打开工具XnView-程序员宅基地

文章浏览阅读9.2k次。BW格式文件打开工具 XnView_bw文件

警告: A C3P0Registry mbean is already registered. This probably means that an application...-程序员宅基地

文章浏览阅读5.6k次。问题描述:六月 23, 2017 9:16:59 下午 com.mchange.v2.log.MLog 信息: MLog clients using java 1.4+ standard logging.六月 23, 2017 9:16:59 下午 com.mchange.v2.c3p0.C3P0Registry banner信息: Initializing c3p0-0.9.2-p_a c3p0registry mbean is already registered

图文混排的实践+输入式动态插入表情_qq 图文混排-程序员宅基地

文章浏览阅读860次。暑假快要结束了,这个暑假献给_qq 图文混排

linux grep 递归_如何在Linux中通过子目录递归使用Grep命令?-程序员宅基地

文章浏览阅读4.9k次,点赞2次,收藏6次。linux grep 递归grep is very useful command to search files and directories. What makes grep powerful is that it can search file contents. We can search file content according to extension. Recursive beh..._grep 递归