el-table滚动分页加载数据

最新推荐文章于 2025-10-28 09:56:29 发布

原创最新推荐文章于 2025-10-28 09:56:29 发布 · 2.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该文章介绍了如何在Vue.js项目中使用el-table-infinite-scroll插件实现表格的无限滚动加载功能。首先，通过npm安装插件并全局引入。然后，在模板中配置el-table组件，利用指令el-table-infinite-scroll监听滚动事件。在方法中处理数据加载逻辑，包括首次加载和滚动时加载下一页数据。

1. 安装infinite-scroll 版本1：

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

2. 全局引入：

在main.js中

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

3. 页面示例：

<template>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" height="100%" border v-el-table-infinite-scroll="scrollLoad">
        <el-table-column prop="显示字段1value" label="显示字段1" width="180"></el-table-column>
        <el-table-column prop="显示字段2value" label="显示字段2" width="180"></el-table-column>
        <el-table-column prop="显示字段3value" label="显示字段3"></el-table-column>
    </el-table>
</template>

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll'; // 全局引用无需此引用

export default {
    // 全局引用无需此声明
    directives: {
        'el-table-infinite-scroll': elTableInfiniteScroll
    },
    data() {
        return {
          listLoading: true, // 加载中
          list: [], // 表数据
          pageObj: {
            pageSize: 5, // 每页数据的量
            currentPage: 1, // 当前页索引
            totalSize: 0, //总数量
            currentSkipCount: 0, //当前显示
          },
          filter: { // 对应查询数据方法中所需参数
            Keyword: null,
            Sidx: "type",
            Sord: "asc",
            ThenBySidx: "number",
            ThenBySord: "asc",
            SkipCount: null,
            MaxResultCount: null,
          },
          isFirst: true, // 是否第一次加载
        };
    },
    methods: {
        loadDataListfilter() {
          this.isFirst = false;
          this.filter.MaxResultCount = this.pageObj.pageSize;
          this.filter.SkipCount = this.pageObj.currentSkipCount;
          this.getTerminals();
        },
        getTerminals() {
          this.listLoading = true;
          this.$store
            .dispatch("数据查询接口地址", this.filter)
            .then((response) => {
              this.pageObj.totalSize = response.result.totalCount;
              this.list = this.list.concat(response.result.items);
              this.listLoading = false;
            })
            .catch((ex) => {
              alert(ex);
            });
        },
        scrollLoad() {
          if (this.isFirst) {
            this.loadDataListfilter();
          }
          else {
            // this.$message.success('加载下一页');
            this.pageObj.currentPage = this.pageObj.currentPage + 1;
            this.pageObj.currentSkipCount =
              (this.pageObj.currentPage - 1) * this.pageObj.pageSize;
            this.loadDataListfilter();
          }
        },
    },
};
</script>