elementUi——table中实现滚动到底部无限加载数据功能——功能实现

清疚 2022-09-09 12:57 2773阅读 0赞

最近在看同事代码时，发现同事使用了一个表格自动滚动加载数据的功能。

这个功能适用于：表格中内容过多，需要分页展示，但是又不想使用分页组件，此时可以只展示一页的数据，然后当表格滚动到底部时，再加载下一页的数据。

参看大神链接：[element-ui 的 el-table 上使用无限滚动加载（与自带的 infinite-scroll 结合）：https://blog.csdn.net/baidu\_27769027/article/details/101924676][element-ui _ el-table _ infinite-scroll _https_blog.csdn.net_baidu_27769027_article_details_101924676]

`elementUi`官网上是有无限滚动加载功能的。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]

# `infiniteScroll`无限滚动功能实现 #

在要实现滚动加载的列表上上添加`v-infinite-scroll`，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。

官网实例代码如下：

<template>
      <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
        <li v-for="i in count" class="infinite-list-item">{ {  i }}</li>
      </ul>
    </template>
    
    <script>
      export default { 
        data () { 
          return { 
            count: 0
          }
        },
        methods: { 
          load () { 
            this.count += 2
          }
        }
      }
    </script>

# 针对表格数据的无限滚动功能实现 #

[表格数据无限滚动加载功能实现效果预览地址：https://yujinpan.github.io/el-table-infinite-scroll/][https_yujinpan.github.io_el-table-infinite-scroll]

## 1.安装插件`el-table-infinite-scroll` ##

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

## 2.全局注册方法：在`main.js`文件中引入并全局注册 ##

import Vue from 'vue';
    import elTableInfiniteScroll from 'el-table-infinite-scroll';
    
    Vue.use(elTableInfiniteScroll);

## 3.局部注册方法： ##

## 4.页面使用无限滚动插件 ##

<template>
      <el-table
        border
        height="400px"
        v-el-table-infinite-scroll="load"
        :data="tableData"
      >
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </template>
    
    <script>
    import elTableInfiniteScroll from 'el-table-infinite-scroll';
    
    const exampleData = new Array(10).fill({ 
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    });
    
    export default { 
      directives: { 
        'el-table-infinite-scroll': elTableInfiniteScroll
      },
      data() { 
        return { 
          tableData: exampleData
        };
      },
      methods: { 
        load() { 
          this.$message.success('加载下一页');
          this.tableData = this.tableData.concat(exampleData);
          //此时也可以调用接口，然后做数组的拼接
        }
      }
    };
    </script>
    
    <style scoped>
    .el-table { 
      width: 100%;
    }
    </style>

完成！！！

此篇文章只做记录，具体步骤完全参考大神的链接，希望遇到此需求的时候，能够帮助实现功能。

[element-ui _ el-table _ infinite-scroll _https_blog.csdn.net_baidu_27769027_article_details_101924676]: https://blog.csdn.net/baidu_27769027/article/details/101924676
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/6a11466f706c43e9b7934e46a654058c.png
[https_yujinpan.github.io_el-table-infinite-scroll]: https://yujinpan.github.io/el-table-infinite-scroll/