ElementUI-Plus虚拟化表格的使用

<template>
  <el-table
    :data="tableData"
    height="250"
    virtual-scroll
    :item-size="40"
    style="height: 500px;">
    <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>
export default {
  data() {
    return {
      tableData: []
    };
  },
  mounted() {
    this.generateData(10000);
  },
  methods: {
    generateData(count) {
      const tableData = [];
      for (let i = 0; i < count; i++) {
        tableData.push({
          date: '2016-05-02',
          name: '王小虎',
          address: `上海市普陀区金沙江路${i}号`
        });
      }
      this.tableData = tableData;
    }
  }
};
</script>

这个例子展示了如何在ElementUI-Plus中使用虚拟化表格。我们首先在data中定义了一个空的tableData数组。在组件被挂载(mounted)后，我们调用generateData方法生成了一个包含10000条数据的数组，并将其赋值给tableData。在模板中，我们使用el-table组件并设置了virtual-scroll属性来启用虚拟滚动，同时设置了表格的height和每项的item-size。这样，用户就可以在不加载整个表格数据的情况下浏览上万条数据。