vue el-table表格数据,不分页,鼠标滚动实现数据懒加载

在Vue.js中，使用`el-table`组件构建表格并实现数据懒加载（也称为无限滚动或滚动到底部加载更多）通常涉及以下几个步骤：

1. **配置基础结构**：
首先，在模板中引入`<el-table>`组件，并设置基本属性如列定义、表头等。

<template>
  <div>
    <el-table :data="tableData" ref="table">
      <!-- 表头和列配置 -->
    </el-table>
  </div>
</template>

2. **设置数据源**：
初始化时，只提供一部分数据，剩余的数据放在一个数组或其他合适的数据结构中。

<script>
export default {
  data() {
    return {
      tableData: [], // 初始数据
      allData: [] // 存储所有数据的数组
    };
  },
  computed: {
    totalPages() { // 总页数计算，假设每页显示10条数据
      return Math.ceil(this.allData.length / 10);
    }
  }
};
</script>

3. **监听滚动事件**：
使用`mounted`生命周期钩子，监听`el-table`的滚动事件，当滚动到底部时触发数据加载。

mounted() {
  this.$refs.table.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
  this.$refs.table.removeEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const bottom = this.$refs.table.$el.scrollTop + this.$refs.table.$el.offsetHeight === this.$refs.table.$el.scrollHeight;
    if (bottom && this.page > 0) {
      this.loadMore();
    }
  },
  loadMore() {
    // 加载下一页数据，并将其合并到现有数据中
    const newData = ...; // 调用API获取更多数据
    this.tableData.push(...newData); // 更新数据
    this.page++;
  }
}

4. **控制加载次数**：
可以添加一个`page`状态变量来限制最多加载多少次，防止无限循环请求。

以上是一个简单的示例，实际应用中可能需要根据业务需求调整数据获取、分页策略以及错误处理等细节。