vue+element select組件結合vue-virtual-scroll-list插件解決數據量太大,導致渲染過慢

語言: CN / TW / HK

theme: juejin

本文已參與【新人創作禮】活動,一起開啟掘金創作之路。

場景

因為項目中數據量有時候過於龐大,使用elementui的select組件時,會導致下拉框加載數據蠻並且卡頓甚至於卡死,為解決這個問題,發現vue-virtual-scroll-list這個插件,地址 https://www.npmjs.com/package/vue-virtual-scroll-list ,用來模擬虛擬滾動,從而解決問題。

安裝

javascript npm install vue-virtual-scroll-list --save

引入

```javascript // 單個文件引入 import virtualList from 'vue-virtual-scroll-list'

// 註冊組件
components: { 'virtual-list': virtualList }

```

基礎用法

一、要用這個插件去包裹需要循壞展示的標籤。這裏就是el-option標籤

```javascript

import ElOptionNode from './el-option-node'; // data data(){ return { mediaAccountArr: [ // 示例數據 {id:1,mediaAccountId:1008666} ], itemComponent: ElOptionNode, } } 抽離出el-option標籤,新建el-option-node.vue文件javascript // el-option-node.vue

```

參數:

1.png - data-key="'id'" 就是綁定的唯一key值 - data-sources="mediaAccountArr" 下拉框的數組 - data-component="itemComponent" 就是抽離中的el-option組件 - keeps="20" 渲染的個數 - extra-props 值為對象,可以傳入自定義屬性進去

注意點

<virtual-list style="max-height: 245px; overflow-y: auto;" 1. 這裏的樣式一定要設置成最大高度,防止數據量少了時候下拉框顯示多餘空白地方 2. 高度要設置成245px,不然會出現兩個滾動條,會發生滾動bug 2. 一定要設置y軸超出滾動 3. select標籤使用popper-class自定義一個類名,解決會出現兩個滾動條的問題 ```

``` 他默認渲染30個dom標籤出來(我通過keeps配置成20個),到這裏基本就解決了數據量大的卡頓問題。因為以往是有多少個下拉框就好渲染多少個dom標籤。

3.png

實現模糊搜索功能

  1. 這就需要兩個數組,一個是顯示在頁面上的數組,一個是全量數據的數組,在data中定義 javascript data(){ return { virtualoptions: [], // 在定義個存全量數據的數組 } 2.使用select自帶的filterable,remote屬性實現搜索功能,remote-method方法實現過濾數據 ```javascript

methods: { remoteMethod(query) { if (query !== '') { this.mediaAccountArr = this.virtualoptions.filter(item => { return item.mediaAccountId.toLowerCase() .indexOf(query.toLowerCase()) > -1; }); } else { this.mediaAccountArr = this.virtualoptions; } }, visibleVirtualoptions(bool) { if(!bool) { this.$refs.virtualList.reset() setTimeout(() => { this.mediaAccountArr = this.virtualoptions; }, 200); } } } ``` - visible-change屬性實現下拉框出現/隱藏時觸發虛擬列表重置和把列表重置成全量數據

3.以上代碼基本已實現功能,如下圖 a1.gif

後續

考慮到項目中會有很多地方會用到這個功能,所以打算封裝成組件。