vue2 项目，el-table显示 10 条数据并在数据超出时实现滚动加载（滚动到表格底部时自动请求更多数据）

在Vue2项目中，要实现el-table组件在显示10条数据并在数据超出时滚动加载更多数据的功能，可以通过监听表格的滚动事件来实现。以下是实现这一功能的基本步骤：

1. 在数据获取时，首先只获取前10条数据。

2. 在el-table组件中添加一个滚动事件监听器。当表格滚动到底部时，触发数据加载的函数。

3. 在数据加载的函数中，从服务器请求更多的数据，并将其添加到现有的数据列表中。

4. 更新表格的数据绑定，确保新加载的数据能够显示在表格中。

下面是一个简单的代码示例：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @scroll="handleScroll"
  >
    <!-- 表格的列定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      total: 0, // 数据总数
      pageSize: 10, // 每页数据量
      currentPage: 1 // 当前页码
    };
  },
  methods: {
    fetchData() {
      // 模拟从服务器获取数据
      // 实际使用时，这里的逻辑应为异步请求，并返回相应的数据
      const newData = Array.from({ length: this.pageSize }, (_, index) => ({
        // ...生成数据的逻辑
      }));
      this.tableData = [...this.tableData, ...newData];
    },
    handleScroll(event) {
      const { scrollTop, scrollHeight, offsetHeight } = event.target;
      // 当表格滚到最底部时触发
      if (scrollTop + offsetHeight >= scrollHeight) {
        this.currentPage += 1;
        this.fetchData();
      }
    },
    // 加载更多数据的方法
    loadMore() {
      this.fetchData();
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

注意：示例中使用了模拟数据的方式简化了数据获取过程。在实际应用中，`fetchData`方法应是一个异步函数，负责向服务器请求数据，然后再更新到`tableData`中。