需求

項(xiàng)目中寫(xiě)一個(gè)批量導(dǎo)入Excel數(shù)據(jù)的功能（大約8000行，30列），需要上傳文件調(diào)接口將后臺(tái)返回Excel文件里的數(shù)據(jù)不分頁(yè)用el-able展示出來(lái)。

問(wèn)題

因?yàn)榉祷氐臄?shù)據(jù)量很大，返回的數(shù)據(jù)還需要進(jìn)行二次處理，在列表中還有輸入框以及下拉選框，所以加載大量數(shù)據(jù)渲染的時(shí)候要加載非常久，甚至有頁(yè)面崩潰的情況

如下圖片顯示

table大概數(shù)據(jù)

調(diào)研

1.調(diào)研了vue-easytable，它的自定義一些相關(guān)的都是用的jsx的語(yǔ)法，對(duì)于只寫(xiě)過(guò)vue element項(xiàng)目的人員來(lái)說(shuō)，不是很習(xí)慣，支持ie11
2.調(diào)研了vxetable，圖標(biāo)多樣，表格類(lèi)型多，里面的功能也非常豐富，但是3.0版本以后不支持IE（我覺(jué)得vxetable無(wú)論性能，還是功能都是最厲害的）
2.調(diào)研了el-table-virtual-scroll，基于Element-UI的Table 組件開(kāi)發(fā)的虛擬滾動(dòng)組件，對(duì)于寫(xiě)vue element-ui項(xiàng)目的人員來(lái)說(shuō)，非常值得推薦目前僅支持vue2的項(xiàng)目，目前不支持ie

使用 el-table-virtual-scroll 插件

安裝

npm i el-table-virtual-scroll -S

代碼

<template>
    <!--若keyProp未設(shè)置或keyProp值不唯一，可能導(dǎo)致表格空數(shù)據(jù)或者滾動(dòng)時(shí)渲染的數(shù)據(jù)斷層、不連貫、滾動(dòng)不了-->
    <virtual-scroll
        :data="virtualData"
        :item-size="62"
        key-prop="id"
        @change="(virtualList) => tableData = virtualList"
        :virtualized="true"
    >
      <!--height一定要設(shè)置否則會(huì)滾動(dòng)條滾動(dòng)位置不對(duì)且數(shù)據(jù)滾動(dòng)全部加載完后會(huì)出現(xiàn)白板-->
      <el-table
          row-key="id"
          :data="tableData"
          height="600px"
      >
        <el-table-column prop="id" label="序號(hào)" width="60" fixed/>
        <!--使用虛擬加載插件多選需要引入VirtualColumn-->
        <virtual-column width="60" fixed type="selection"/>
        <el-table-column prop="name" label="名稱(chēng)" 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: [], // 實(shí)際數(shù)據(jù)
      tableData: [], // 虛擬滾動(dòng)加載顯示的數(shù)據(jù)
      multipleSelection: [] // 勾選的數(shù)據(jù)
    }
  },
  created() {
    this.getVirtualList()
  },
  methods: {
    // 多選
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 接口返回的8000條數(shù)據(jù)
    getVirtualList() {
      this.tableList = data
    }
  }
}
</script>