v-infinite-scroll是绑定到了页面上，不是绑定到table，页面滚动到底部会加载数据，而不是table

你说得对，v-infinite-scroll 指令是绑定到页面上的，而不是绑定到 table 组件上。如果使用 v-infinite-scroll 指令实现滚动加载，当页面滚动到底部时，会触发 loadMore 方法，而不是只在 table 组件内部滚动时触发。

如果要实现在 table 组件内部滚动时触发加载数据，可以使用 ElementUI 提供的 load 方法或者使用 Vue 3 的自定义指令实现。以下是使用 load 方法实现滚动加载的基本步骤：

1. 在 table 组件上添加 ref 属性，例如：

   <el-table ref="table" :data="tableData" :max-height="400" @load="loadMore">

在这个例子中，我们为 table 组件添加了 ref 属性，并在 load 事件中绑定了 loadMore 方法。

2. 实现 loadMore 方法，这个方法会在滚动到底部时被触发，例如：

   loadMore() {
     this.loading = true; // 开始加载
     // 发送请求获取新数据
     fetchData().then((data) => {
       this.tableData = this.tableData.concat(data); // 追加新数据
       this.loading = false; // 加载完成
     });
   }

在这个例子中，我们通过 fetchData 方法获取新数据，并将新数据追加到原有数据中。注意在加载数据时要将 loading 状态设置为 true，在加载完成后要将 loading 状态设置为 false。

3. 在 mounted 钩子函数中获取 table 组件的 $el 属性，并绑定 scroll 事件，例如：

   mounted() {
     const tableEl = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
     tableEl.addEventListener('scroll', this.handleTableScroll);
   },
   methods: {
     handleTableScroll() {
       const tableEl = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
       const scrollBottom = tableEl.scrollHeight - tableEl.scrollTop - tableEl.clientHeight;
       if (scrollBottom <= 0) {
         this.$refs.table.doLayout();
       }
     },
   }

在这个例子中，我们获取 table 组件的 .el-table__body-wrapper 元素，并绑定了 scroll 事件。在 handleTableScroll 方法中，我们计算出 table 组件距离底部的距离 scrollBottom，如果 scrollBottom 小于等于 0，就说明滚动到了 table 组件的底部，此时调用 table 组件的 doLayout 方法触发 load 事件，从而实现滚动加载。

这里需要注意，每当 table 组件的数据发生变化时，需要调用 doLayout 方法重新计算表格布局，否则 load 事件可能不会被触发。