el-table实现表格滚动懒加载

要实现el-table的表格滚动懒加载，可以使用以下步骤：

1. 在el-table组件中，设置固定高度，并将表格的滚动设置为“y”，这样表格就会出现纵向滚动条。

2. 在el-table的数据源中，只加载一页数据，而不是全部数据。可以使用分页器或者其他方式实现。

3. 监听表格的滚动事件，并且判断当前滚动位置是否到达了表格底部，如果到达了，就触发加载更多数据的操作。

4. 在加载更多数据之前，可以显示一个loading提示，避免用户误以为表格出现了卡顿现象。

5. 加载更多数据之后，将新的数据添加到表格的数据源中，并且更新表格的显示。

6. 如果已经加载了全部数据，可以在表格底部显示一个提示信息，告诉用户已经没有更多数据可以加载了。

综上所述，以上就是实现el-table表格滚动懒加载的步骤。

相关问题

el-table滚动懒加载

实现 el-table 的滚动懒加载，可以使用 element-ui 提供的 `load` 属性和 `scroll` 事件。

首先，需要设置 el-table 的 `height` 属性，让其具有滚动条。然后，在 el-table 上添加 `@scroll` 事件监听器，当表格滚动时触发事件。

在 `@scroll` 事件处理程序中，可以通过计算表格滚动的距离和表格内容的高度，来判断是否需要加载更多数据。如果滚动距离接近内容高度的底部，就触发 `load` 事件，并传递一个回调函数作为参数，该回调函数用于加载数据并更新表格。

以下是一个示例代码：

<template>
  <el-table :data="tableData" :height="tableHeight" @load="loadData" @scroll="handleScroll">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      totalCount: 0,
      tableHeight: 400, // 设置表格高度
    };
  },
  methods: {
    // 加载数据
    loadData(callback) {
      // 发送请求获取数据
      // ...
      // 更新表格数据
      this.tableData = [...this.tableData, ...newData];
      // 调用回调函数通知表格加载完成
      callback();
    },
    // 监听表格滚动事件
    handleScroll(event) {
      const tableBody = event.target.querySelector('.el-table__body-wrapper');
      const scrollBottom = tableBody.scrollHeight - tableBody.scrollTop - tableBody.clientHeight;
      if (scrollBottom < 50) { // 当滚动距离接近底部时，触发 load 事件
        this.$refs.table.$emit('load');
      }
    },
  },
};
</script>

注意，在实际应用中，需要根据具体的业务逻辑进行调整和优化。

element el-table 实现无限滚动

Element UI 的 el-table 组件默认不支持无限滚动，需要通过自定义 slot 和监听 scroll 事件来实现。

以下是一个简单的例子：

<template>
  <div class="table-wrap" ref="tableWrap" @scroll="handleScroll">
    <el-table :data="tableData" v-loading="loading" border>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
    <div v-if="showLoading" class="loading">
      <i class="el-icon-loading"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      showLoading: false,
      page: 1,
      pageSize: 10,
      total: 0,
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.loading = true;
      // 模拟异步加载数据
      setTimeout(() => {
        const data = [];
        for (let i = 0; i < this.pageSize; i++) {
          data.push({
            name: `Name${this.total + i + 1}`,
            age: Math.floor(Math.random() * 100) + 1,
            address: `Address${this.total + i + 1}`,
          });
        }
        this.tableData = this.tableData.concat(data);
        this.total += data.length;
        this.loading = false;
      }, 1000);
    },
    handleScroll() {
      const tableWrap = this.$refs.tableWrap;
      const scrollTop = tableWrap.scrollTop;
      const scrollHeight = tableWrap.scrollHeight;
      const clientHeight = tableWrap.clientHeight;
      if (scrollTop + clientHeight >= scrollHeight && !this.loading) {
        // 滚动到底部且未加载中，则加载下一页数据
        this.showLoading = true;
        this.page++;
        this.loadData();
      }
    },
  },
};
</script>

在模板中，我们需要将 el-table 放在一个具有固定高度和滚动条的容器内，用 ref 属性获取容器元素并监听 scroll 事件，当滚动到底部时触发加载下一页数据的操作。

在 data 中定义了一些状态，包括表格数据、加载状态、当前页数、每页数量和数据总数等。loadData 方法用于模拟异步加载数据，并将加载到的数据追加到表格数据中。handleScroll 方法用于监听 scroll 事件，当滚动到底部时触发加载下一页数据的操作。

在模板中，我们还需要添加一个 loading 组件，用于显示加载中状态。根据 showLoading 变量的值决定是否显示 loading 组件。

需要注意的是，el-table 组件的高度必须要设置，否则无法触发滚动事件。可以通过在 el-table 上添加 height 属性或者在外层容器上设置固定高度来实现。