无限滚动组件说明

这是一个针对 vue2 和 elementUI 的无限滚动组件，可实现虚拟加载。

概要

特点一 滚动加载

本组件针对 el-table，获取 el-table 中的 table_wraper 元素，并添加滚动监听事件。 滚动到底部时调用加载方法,添加更多数据到维护的数组（scrollData）中。

特点二 虚拟列表

本组件，初始化时根据传入的每行最小高度值（itemHeight）计算出当前列表最多能展示多少行数据。 之后每次滚动并不会渲染维护数组（scrollData）中的所有数据，而是根据当前滚动的距离来渲染出对应的数据。 这样的好处是节约 dom 开销，提升性能。

特点三 不定高的列表

vue 的表格中每一行数据可能存在换行导致高度不一致，也就是每一行的高度是不定高的。这里组件仍然可以正确渲染。

注意

本组件只针对使用 vue2 和 elementUI 的项目

安装

npm install infinite-scroll-table

使用方法

在 main.js 中引入

import InfiniteScrollTable from "infinite-scroll-table";
Vue.use(InfiniteScrollTable);

在组件中使用 InfiniteScrollTable 组件包裹 el-table 组件，然后

传入三个配置：

• 列表维护数据的总数组：scrollData
• 加载更多数据的方法：getMoreData
• 滚动的相关配置：loadConfig

侦听一个事件：

• 侦听 setTableData 事件，该事件会返回一个数组，表示当前滚动距离应该显示的数据。

加载方法说明：

getMoreData 对应加载更多数据的方法。这个方法一般是 ajax 请求，也就是异步的方法。 为了组件控制加载的过程，我们需要在请求前，调用组件的loadStart方法， 请求结束后调用组件的loadEnd方法。

如下代码中使用 ref 标记了组件，加载前后分别调用了this.$refs.ref_infinite_table.loadStart() 和 this.$refs.ref_infinite_table.loadEnd()

并且加载结束后注意设置 loadConfig 中的 totalCount 的值，以便于组件判断已经加载完了。

详细介绍，参见下方配置详解。

完整示例：

<template>
    <InfiniteScrollTable
        ref="ref_infinite_table"
        :scrollData="scrollData"
        :getMoreData="getMoreDataFn"
        :loadConfig="loadConfig"
        @setTableData="setTableDataFn"
    >
        <el-table :data="tableData" style="width: 100%" height="350">
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
        </el-table>
    </InfiniteScrollTable>
</template>
<script>
export default {
    data() {
        return {
            loadConfig: {
                totalCount: 0,
            },
            scrollData: [],
            tableData: [],
        };
    },
    methods: {
        async getMoreDataFn() {
            this.$refs.ref_infinite_table.loadStart(); // 加载前调用 loadStart
            await this.queryData(); // queryData 是你请求后端数据的方法
            this.loadConfig.totalCount = 99; // 注意设置后端共有多少数据，以便判断结束
            this.$refs.ref_infinite_table.loadEnd(); // 加载后调用 loadEnd
        },
        setTableDataFn(arr) {
            this.tableData = arr;
        },
        async queryData() {
            await new Promise((resolve) => {
                setTimeout(() => {
                    resolve();
                }, 1000);
            });
            let len = this.scrollData.length;
            for (let i = 0; i < 10; i++) {
                this.scrollData.push({ id: len + i, name: "zyl" });
            }
        },
    },
};
</script>

配置详解

loadConfig

示例：

loadConfig: {
    loadingText: '玩命加载中', // 加载时提示文字
    overText: '你已经碰到我的底线了（没有更多数据）', // 所有数据加载完毕后显示文字
    totalCount: 0, // 传totalCount 或者 isOver  ========== 重要
    isOver: false, // 传isOver或者 totalCount  ========== 重要
    itemHeight: 40, // 每一行数据的最小高度，不传默认40
    distance: 40 // 滚动条距离底部并触发滚动加载的距离 不传 则默认为20
}

setTableData

为了节约 dom 的开销，我们尽量只渲染当前容器你能看到的数据。而el-table组件绑定的 data 你传入多少数据，就会显示多少数据。 所以我们把所有的数据放在 scrollData 中，通过 setTableData 事件传递出当前应该显示的数据给 tableData。 所以拿到 setTableData 传出的数据，直接赋值给 el-table 绑定的 data 就好了。 示例：

setTableDataFn(arr) {
    this.tableData = arr; // tableData 是el-table绑定的data
},

组件可被调用的几个方法

• infiniteLoadStart 加载数据前调用 ========== 重要
• infiniteLoadEnd 加载数据结束时调用 ========== 重要
• scrollToTop 滚动到顶部
• scrollToNextPage 滚动到下一页
• scrollToPrePage 滚动到上一页
• updateTableSize 传入的元素尺寸变化时调用 使用$refs['这个组件的 ref 名称'].fn() 来调用，fn 对应上述一个方法。

其它传参

• showTopBtn 是否展示回到顶部的按钮（滚动到下方才会展示）
• showBottomBar 是否展示下方表示加载状态的横条
• loadImmediate 表格数据不足以滚动时 是否立刻加载更多数据

注意点

isOver 或 totalCount 只用一种来控制是否结束

其它

本组件还支持一种便捷用法，在el-table上直接使用v-tableScrollLoad指令来让表格可以滚动加载。这个指令绑定一个加载数据的方法。 使用实例：

// loadingFn是加载数据的方法
<el-table v-tableScrollLoad="loadingFn" :data="tableData" stripe height="350">
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="账户号" prop="acNo"></el-table-column>
    <el-table-column label="操作"></el-table-column>
</el-table>

注意点:

• 初始的 tableData 如果为 0,无法触发滚动,所以第一次查询需要写个额外的方法
• 为了避免重复加载,应该自行在 loadingFn 方法中判断是否正在查询,是否所有加载结束.
• 此方法默认触发滚动距离是 20,可通过给v-tableScrollLoad指定传参来更改,如:v-tableScrollLoad[40]="loadingFn"