需求
項目中寫一個批量導(dǎo)入Excel數(shù)據(jù)的功能（大約8000行奈梳，30列）踢星，需要上傳文件調(diào)接口將后臺返回Excel文件里的數(shù)據(jù)不分頁用el-able展示出來钞护。
問題
因?yàn)榉祷氐臄?shù)據(jù)量很大窗轩，返回的數(shù)據(jù)還需要進(jìn)行二次處理剔氏，在列表中還有輸入框以及下拉選框，所以加載大量數(shù)據(jù)渲染的時候要加載非常久遣妥，甚至有頁面崩潰的情況
如下圖片顯示
table大概數(shù)據(jù)
調(diào)研
1.調(diào)研了vue-easytable，它的自定義一些相關(guān)的都是用的jsx的語法攀细，對于只寫過vue element項目的人員來說箫踩，不是很習(xí)慣，支持ie11
2.調(diào)研了vxetable谭贪，圖標(biāo)多樣境钟，表格類型多，里面的功能也非常豐富俭识，但是3.0版本以后不支持IE（我覺得vxetable無論性能慨削，還是功能都是最厲害的）
2.調(diào)研了el-table-virtual-scroll，基于Element-UI的Table 組件開發(fā)的虛擬滾動組件套媚，對于寫vue element-ui項目的人員來說缚态，非常值得推薦目前僅支持vue2的項目，目前不支持ie
使用 el-table-virtual-scroll 插件
安裝
npm i el-table-virtual-scroll -S
代碼
<template>
<!--若keyProp未設(shè)置或keyProp值不唯一堤瘤，可能導(dǎo)致表格空數(shù)據(jù)或者滾動時渲染的數(shù)據(jù)斷層玫芦、不連貫、滾動不了-->
<virtual-scroll
:data="virtualData"
:item-size="62"
key-prop="id"
@change="(virtualList) => tableData = virtualList"
:virtualized="true"
>
<!--height一定要設(shè)置否則會滾動條滾動位置不對且數(shù)據(jù)滾動全部加載完后會出現(xiàn)白板-->
<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: [], // 實(shí)際數(shù)據(jù)
tableData: [], // 虛擬滾動加載顯示的數(shù)據(jù)
multipleSelection: [] // 勾選的數(shù)據(jù)
}
},
created() {
this.getVirtualList()
},
methods: {
// 多選
handleSelectionChange(val) {
this.multipleSelection = val
},
// 接口返回的8000條數(shù)據(jù)
getVirtualList() {
this.tableList = data
}
}
}
</script>
