vue：pc项目下拉触底加载踩坑

今天接到一个需求，将刚接回来的外包项目中的官网内的卡片+分页展示的资料列表改为table展示，且要支持下拉触底加载，自然而然就想到table+下拉触底插件。

由于项目中刚好使用的是element-ui，于是一通百度选择了 el-table-infinite-scroll

在el-table上使用无限滚动加载 - 云+社区 - 腾讯云后来发现滚动到下面有时候会执行load2次，用下面的方法规避，间隔2秒才执行逻辑代码https://cloud.tencent.com/developer/article/1937768按照教程做好demo，想着周末早点下班，回家撸猫，就赶紧去找产品确认，结果产品说，这个地方不要让表格出现滚动条，要让页面自动往下撑开，但是el-table如果没有一个高度，是没有办法出现滚动条的，就算不显示的设置高度，也会有一个默认的高度。于是又是一通百度，发现原来还有一个叫做v-infinite-scroll的插件

v-infinite-scroll无限滚动_山海一哥的博客-CSDN博客_v-infinite-scroll网上搜索了很多，基本上都是指'vue-infinite-scroll'组件，其实如果你是elementUI项目的话，你可以直接使用v-infinite-scroll示例： <div style="height:100px;overflow: auto;" v-infinite-scroll="test"> <div style="height:200px">滚动...https://blog.csdn.net/qq_43702430/article/details/105737234我的思路是对el-table使用v-infinite-scroll，结果出现了如下情况（注意看滚动条）

 这里滚动到底不会触发下一次加载，必须要手动往上滚动一点，再往下滚动才行，回头翻了一下前面的两篇教程，发现应该是延迟的问题，于是我想到把定时器去掉不就行了吗

结果出现了另一个问题

列表会自动一直加载，原因是应为滚动条始终在底部，导致无限自动加载数据。

正常情况滚动条应该是不会始终在底部的，于是我怀疑是应为在el-table上面使用v-infinite-scroll的原因。毕竟百度出来的都是在div上面使用v-infinite-scroll，在el-table上使用el-table-infinite-scroll。

于是我换了个思路，使用div来模拟el-table

<div v-infinite-scroll="load" class="fake-table">
            <div class="fake-table-head">
              <div class="fake-th" style="width: 362px;">标题</div>
              <div class="fake-th" style="width: 180px;">上传时间</div>
              <div class="fake-th" style="width: 90px;">所需积分</div>
              <div class="fake-th" style="width: 140px;">下载量</div>
            </div>
            <div v-for="(item, index) in aMaterial" :key="index" class="fake-tr">
              <div class="fake-td truncate" style="width: 362px;">
                <span class="table-link" @click="toDetail(item)">{{item.fileName}}</span>
              </div>
              <div class="fake-td" style="width: 180px;">{{ $dayjs(item.creationDate).format('YYYY-MM-DD HH:mm:ss') || '-' }}</div>
              <div class="fake-td" style="width: 90px;">{{ item.creditsPrice }}</div>
              <div class="fake-td" style="width: 140px;">{{ item.downCount }}人下载</div>
            </div>
            <!--加载中、到底了-->
            <table-append v-if="showTableAppend" slot="append" :state="scrollTableState"></table-append>
          </div>

 最后总算是解决了这个问题，不知道还有没有别的方案可以替代，不然每个这种列表都要重复写代码，看起来很难受。