# infinite-scroll-table

**Repository Path**: zyl-ll/infinite-scroll-table

## Basic Information

- **Project Name**: infinite-scroll-table
- **Description**: 基于vue2+elementUI的无线滚动表格组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 3
- **Created**: 2022-05-24
- **Last Updated**: 2025-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 无限滚动组件说明

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

## 概要

### 特点一 滚动加载

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

### 特点二 虚拟列表

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

### 特点三 不定高的列表

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

### 注意

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

## 安装

`npm install infinite-scroll-table`

## 使用方法

在 main.js 中引入

```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 的值，以便于组件判断已经加载完了。

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

完整示例：

```vue
<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

示例：

```js
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 就好了。
示例：

```js
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`指令来让表格可以滚动加载。这个指令绑定一个加载数据的方法。
使用实例：

```html
// 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"`