el-table+vue3如何实现表格不加分页，只是无限滚动?

Question

el-table+vue3如何实现表格不加分页，只是无限滚动?

Answer 1

el-table无限滚动加载更多-翻页

element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）
安装（建议安装1.X版本，2.X版本目前报错无法使用）

npm install --save el-table-infinite-scroll@1

全局引入

import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';

Vue.use(elTableInfiniteScroll);

局部引入

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';

export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}
</script>

组件中使用

<template>
  <el-table
    border
    height="400px"
    v-el-table-infinite-scroll="load"
    :data="tableData"
  >
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';

const exampleData = new Array(10).fill({
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄'
});

export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  data() {
    return {
      tableData: exampleData
    };
  },
  methods: {
    load() {
      this.$message.success('加载下一页');
      this.tableData = this.tableData.concat(exampleData);
    }
  }
};
</script>

<style scoped>
.el-table {
  width: 100%;
}
</style>

配置选项
参考官网

内容来源：el-table无限滚动加载更多-翻页

Answer 2

直接使用 Surely Vue Table 吧，引入之后直接用就行了，文档也很齐全。免费版就够用了。

Answer 3

在使用 el-table 组件的时候，如果想要实现无限滚动而不是分页，可以使用 el-table 组件的 "virtual-scroll" 属性：

<el-table
  virtual-scroll
  :data="data">
  <!-- 表格列的定义 -->
</el-table>

在这里，"virtual-scroll" 属性告诉 el-table 组件使用虚拟滚动来渲染表格。这意味着，在滚动时，el-table 组件只会渲染当前可见的行，而不是一次性渲染整个表格。这样做可以提高表格渲染的性能，特别是当表格数据很大时。

注意：使用虚拟滚动时，el-table 组件的 "height" 属性应该设置为表格的固定高度。这样 el-table 组件才能确定渲染多少行数据。