Vue无限滚动表格组件（el-table-infinite-scroll）使用教程

秋或依

于 2025-04-19 10:20:42 发布

阅读量860

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00035/article/details/147346232

版权

Vue无限滚动表格组件（el-table-infinite-scroll）使用教程

el-table-infinite-scroll Infinite scroll for el-table. 项目地址: https://gitcode.com/gh_mirrors/el/el-table-infinite-scroll

1. 项目介绍

el-table-infinite-scroll 是一个基于 Vue 和 Element UI 的无限滚动表格组件。它能够帮助你实现一个滚动加载大量数据的表格，无需一次性加载所有数据，提高页面的响应速度和用户体验。

2. 项目快速启动

首先，确保你的项目中已经安装了 Vue 和 Element UI。

安装

通过 npm 安装 el-table-infinite-scroll：

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

引入组件

在你的 Vue 文件中，引入并注册 el-table-infinite-scroll 组件：

import Vue from 'vue';
import { ElTableInfiniteScroll } from 'el-table-infinite-scroll';

Vue.use(ElTableInfiniteScroll);

使用组件

在你的模板中，像使用普通的 el-table 一样使用 el-table-infinite-scroll：

<template>
  <el-table-infinite-scroll
    :data="tableData"
    :fetch="fetchData"
    :height="300"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table-infinite-scroll>
</template>

在 script 部分，定义你的数据和方法：

<script>
export default {
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    fetchData() {
      // 这里实现你的数据获取逻辑，返回一个 Promise
      return this.getDataFromServer();
    },
    getDataFromServer() {
      // 模拟从服务器获取数据的异步操作
      return new Promise((resolve) => {
        setTimeout(() => {
          const moreData = [
            // ...获取到的数据
          ];
          this.tableData = this.tableData.concat(moreData);
          resolve(moreData.length);
        }, 1000);
      });
    }
  }
};
</script>