需求

项目中写一个批量导入Excel数据的功能（大约8000行，30列），需要上传文件调接口将后台返回Excel文件里的数据不分页用el-able展示出来。

问题

因为返回的数据量很大，返回的数据还需要进行二次处理，在列表中还有输入框以及下拉选框，所以加载大量数据渲染的时候要加载非常久，甚至有页面崩溃的情况

如下图片显示

table大概数据

调研

1.调研了vue-easytable，它的自定义一些相关的都是用的jsx的语法，对于只写过vue element项目的人员来说，不是很习惯，支持ie11
2.调研了vxetable，图标多样，表格类型多，里面的功能也非常丰富，但是3.0版本以后不支持IE（我觉得vxetable无论性能，还是功能都是最厉害的）
2.调研了el-table-virtual-scroll，基于Element-UI的Table 组件开发的虚拟滚动组件，对于写vue element-ui项目的人员来说，非常值得推荐目前仅支持vue2的项目，目前不支持ie

使用 el-table-virtual-scroll 插件

安装

npm i el-table-virtual-scroll -S

代码

<template>
    <!--若keyProp未设置或keyProp值不唯一，可能导致表格空数据或者滚动时渲染的数据断层、不连贯、滚动不了-->
    <virtual-scroll
        :data="virtualData"
        :item-size="62"
        key-prop="id"
        @change="(virtualList) => tableData = virtualList"
        :virtualized="true"
    >
      <!--height一定要设置否则会滚动条滚动位置不对且数据滚动全部加载完后会出现白板-->
      <el-table
          row-key="id"
          :data="tableData"
          height="600px"
      >
        <el-table-column prop="id" label="序号" width="60" fixed/>
        <!--使用虚拟加载插件多选需要引入VirtualColumn-->
        <virtual-column width="60" fixed type="selection"/>
        <el-table-column prop="name" label="名称" min-width="120"/>
        ...
        <el-table-column prop="operation" label="操作" width="70" fixed="right">
          <template v-slot="scope">
            <el-button type="danger" size="mini" plain>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </virtual-scroll>
</template>

<script>
import VirtualScroll from 'el-table-virtual-scroll';
import { VirtualColumn } from 'el-table-virtual-scroll';

export default {
  components: {
    'virtual-scroll': VirtualScroll,
    'virtual-column': VirtualColumn
  },
  data() {
    return {
      virtualData: [], // 实际数据
      tableData: [], // 虚拟滚动加载显示的数据
      multipleSelection: [] // 勾选的数据
    }
  },
  created() {
    this.getVirtualList()
  },
  methods: {
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 接口返回的8000条数据
    getVirtualList() {
      this.tableList = data
    }
  }
}
</script>