虚拟表格是指只渲染当前可视区域内的数据，通过滚动页面或者表格来动态加载和渲染数据，从而提升页面的性能和用户体验。
通常在 vue2 项目中，element-ui 和 ant design vue 组件库是不支持虚拟表格的。vue3 项目，element-plus 和 ant design vue 组件库已支持。
在 Vue2 项目中，可以使用以下一些常用的虚拟表格插件：

[1]
umy-ui官方文档
[2]
vxe-table官方文档

1.umy-ui

umy-ui 适合和 element ui 组件库搭配使用

快速使用：

1
npm install umy-ui
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
  <div>
    <u-table ref="plTable" :data="tableData" :height="height" use-virtual showBodyOverflow="title" showHeaderOverflow="title" :row-height="rowHeight" border>
      <u-table-column type="index" width="100" fixed />
      <u-table-column v-for="item in columns" :key="item.id" :resizable="item.resizable" :show-overflow-tooltip="item.showOverflow" :prop="item.prop" :label="item.label" :fixed="item.fixed" :width="item.width" />
      <u-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </u-table-column>
    </u-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        height: 0,
        rowHeight: 55, // 如果你这里给行高为50，那么你表格行会出现错乱，不要问为啥，因为你可以看看控制台看节点的高是多少，是55，而你这里给50就有问题！
        columns: Array.from({ length: 8 }, (_, idx) => ({
          prop: 'address',
          id: idx,
          label: '地址地址地址地址地址地址地址地址地址地址地址' + idx,
          width: 200,
        })),
        tableData: Array.from({ length: 500 }, (_, idx) => ({
          id: idx + 1,
          date: '2016-05-03',
          name: 1,
          ab: '欢迎使用u-table',
          address: '北京市天安门天安门天安门北京市天安门天安门天安门北京市天安门天安门天安门',
        })),
      };
    },
    mounted() {
      this.height = 500; // 动态设置高度
    },
    methods: {
  };
</script>

2.vxe-table

vxe-table 适合和 ant design vue 组件库搭配使用

快速使用：

1
npm install xe-utils@3 vxe-table@2
1
2
3
4
5
6
7
<vxe-table border show-overflow highlight-hover-row height="300" :sort-config="{ trigger: 'cell' }" :data="tableData">
  <vxe-table-column type="seq" width="100"></vxe-table-column>
  <vxe-table-column field="name" title="Name" sortable></vxe-table-column>
  <vxe-table-column field="sex" title="Sex"></vxe-table-column>
  <vxe-table-column field="age" title="Age"></vxe-table-column>
  <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
</vxe-table>
1
2
3
4
5
6
7
8
9
10
export default {
  data() {
    return { tableData: [] };
  },
  created() {
    XEAjax.mockList(500).then(data => {
      this.tableData = data;
    });
  },
};