使用el-table做一个滚动到底部自动加载数据的功能，类似于el-table上拉加载

<template>
    <div ref="tableWrapRef" class="table-wrap">
        <el-table :data="messageInfo.content" style="width: 100%" class="mg-t-20">
            <el-table-column type="index" width="50" />
            <el-table-column label="信息">
                <template #default="{ row }">
                    <div>昵称：{{ row.shopName }}</div>
                    <div>ID：{{ row.shopNameId }}</div>
                </template>
            </el-table-column>
            <el-table-column label="店铺ID" prop="shopId" />
            <el-table-column label="用户信息">
                <template #default="{ row }">
                    <div>用户名：{{ row.userName }}</div>
                    <div>用户ID：{{ row.userId }}</div>
                </template>
            </el-table-column>
        </el-table>
        <div class="bottom-text" v-if="messageInfo.content.length >= total">
            没有啦，真的没有啦~
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
// 接口
import { getMarkHistory } from '@/service';
import { throttle } from 'lodash';

const tableWrapRef = ref();
const messageInfo = ref({
    traceId: '',
    content: [],
});
const canNext = ref(true);
const resultVal = ref({});

onMounted(() => {
    for (let num = 0; num < 20; num++) {
        messageInfo.value.content.push({
            aaa: 1,
        });
    }
    tableWrapRef.value.addEventListener(
        'scroll',
        throttle(async function () {
            const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;
            if (scrollDistance <= 30 && canNext.value) {
                canNext.value = false;
                // 重点
                const topVal = this.scrollTop;
                await getData();
                await this.scrollTo(0, topVal);
                // 重点
                setTimeout(() => {
                    resultVal.value.content?.length && (canNext.value = true);
                }, 500);
            }
        }, 300)
    );
});

async function getData() {
    const result = await getMarkHistory({
        pageNum: 1,
        pageSize: 20,
    });
    if (messageInfo.value.content?.length >= 300) {
        result.content = [];
    }
    resultVal.value = result;
    messageInfo.value.content = [...messageInfo.value.content, ...result.content];
}
</script>

<style lang="less" scoped>
.table-wrap {
    max-height: 700px;
    overflow: auto;
    padding-bottom: 20px;

    overscroll-behavior: contain;

    .bottom-text {
        text-align: center;
        height: 30px;
        line-height: 30px;
        margin-top: 25px;
        font-size: 14px;
    }
}
</style>