vue 如何让原生table无限滚动

在Vue中，让原生表格实现无限滚动通常需要结合虚拟滚动（Infinite Scroll）技术。以下是一种常见的做法：

1. 安装和引入库：首先安装`vue-infinite-loading`这个插件，它可以帮助我们处理分页和无限滚动的效果。在项目中添加依赖：

   npm install vue-infinite-loading

2. 使用组件：将`vue-infinite-loading`与表格结合，创建一个新的Vue组件，比如`InfiniteTable.vue`:

   <template>
     <div>
       <table :data="tableData" v-infinite-loading="isLoading">
         <!-- 表格内容 -->
       </table>
       <div v-if="isLoading">
         <!-- 加载更多提示 -->
       </div>
     </div>
   </template>

   <script>
   import { InfiniteLoading } from 'vue-infinite-loading';

   export default {
     components: {
       InfiniteLoading,
     },
     data() {
       return {
         tableData: [],
         isLoading: false,
         pageSize: 10, // 每次加载的数据量
         currentPage: 1,
       };
     },
     methods: {
       loadMore() {
         this.isLoading = true; // 设置为加载状态
         // 模拟异步加载数据
         setTimeout(() => {
           const newData = // 从服务器获取新的数据
           this.tableData.push(...newData);
           if (newData.length < pageSize) {
             this.isLoading = false; // 数据加载完毕后设置为非加载状态
           }
         }, 2000);
       },
     },
   };
   </script>

3. 监听滚动事件：在`mounted`生命周期钩子里，监听表格的滚动事件，当用户滚动到底部时触发`loadMore`方法。

4. 添加滚动监听：

   mounted() {
     window.addEventListener('scroll', this.handleScroll);
   },
   beforeDestroy() {
     window.removeEventListener('scroll', this.handleScroll);
   },
   methods: {
     handleScroll() {
       const isBottom = document.documentElement.scrollTop + document.documentElement.clientHeight === Math.max(document.documentElement.scrollHeight, window.innerHeight);
       if (isBottom && !this.isLoading) {
         this.loadMore();
       }
     },
   },

现在，当表格滚动到页面底部时，会自动加载更多数据，并显示加载中提示。记得替换`loadMore`方法中的数据获取部分为实际的网络请求API。