Vue Element表格实现滚动加载

Posted 李公子lm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue Element表格实现滚动加载相关的知识,希望对你有一定的参考价值。

需求背景

最近有个需求,需要根据用户输入的数字,生成对应行数的表格数据,比如输入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

以上是关于Vue Element表格实现滚动加载的主要内容,如果未能解决你的问题,请参考以下文章

vue element-ui el-form el-table 表单查询表格展示(可滚动加载)

Element下拉框实现滚动加载更多功能实现

vue-element(四) el-table滚动加载

element 表格监听表格滑动到底部加载更多

Vue中 element的table表格导入 与 导出为excel表格的实现

Element-ui 简单实现表格滚动(附演示及源码)