vue2 element 使用虚拟表格

Vue2 Element UI提供了一个虚拟表格组件，能够大幅提高渲染大量数据时的性能。虚拟表格只渲染当前可见区域的数据，而不是全部渲染。当用户滚动表格时，虚拟表格会根据滚动位置自动更新渲染的数据。

要使用Vue2 Element UI虚拟表格，需要引入el-table组件，并将其包裹在el-table-column组件中。在el-table组件上添加v-loading指令，以防止用户在数据加载时进行交互。同时，还需要将el-table-column组件的prop属性设置为“index”，以便虚拟表格正确地进行渲染。

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

<template>
  <div>
    <el-table :data="tableData" v-loading="loading">
      <el-table-column prop="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      tableData: []
    };
  },
  created() {
    // 模拟异步获取数据
    setTimeout(() => {
      this.tableData = this.generateData(10000);
      this.loading = false;
    }, 1000);
  },
  methods: {
    generateData(count) {
      const data = [];
      for (let i = 1; i <= count; i++) {
        data.push({
          index: i,
          name: `王${i}`,
          age: Math.floor(Math.random() * 90 + 10),
          address: `北京市${Math.floor(Math.random() * 20 + 1)}号`
        });
      }
      return data;
    }
  }
};
</script>

在上面的代码中，我们模拟了一个异步获取数据的过程，并在数据加载时显示了一个loading状态。el-table-column组件的prop属性设置为“index”，以便虚拟表格正确地进行渲染。在generateData方法中，我们随机生成了10000条数据。

当我们运行上面的代码时，虚拟表格会自动根据当前可见区域的位置渲染数据，而不是全部渲染。这大大提高了表格渲染时的性能。需要注意的是，虚拟表格只适用于渲染大量数据的情况，如果数据量较小，不建议使用虚拟表格。