需求

項目中寫一個批量導入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>