快捷導(dǎo)航

解決el-select數(shù)據(jù)量過(guò)大的3種方案

更新時(shí)間：2023年09月14日 08:39:27 作者：searchop

最近做完一個(gè)小的后臺(tái)管理系統(tǒng),快上線了,發(fā)現(xiàn)一個(gè)問(wèn)題,有2個(gè)select的選項(xiàng)框線上的數(shù)據(jù)量是1w+,而測(cè)試環(huán)境都是幾百的,所以導(dǎo)致頁(yè)面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下

背景

最近做完一個(gè)小的后臺(tái)管理系統(tǒng)，快上線了，發(fā)現(xiàn)一個(gè)問(wèn)題，有2個(gè)select的選項(xiàng)框線上的數(shù)據(jù)量是1w+。。而測(cè)試環(huán)境都是幾百的，所以導(dǎo)致頁(yè)面直接卡住了，over了。

想了一下，如果接口支持搜索和分頁(yè)，那直接通過(guò)上拉加載就可以了。但后端不太愿意改??。行吧，前端搞也是可以的。

方案

通過(guò)一頓搜索加聯(lián)想總結(jié)了3種方法，以下方法都需要支持開(kāi)啟filterable支持搜索。

標(biāo)題	具體	問(wèn)題
方案1	只展示前100條數(shù)據(jù)，這個(gè)的話配合`filter-method`每次只返回前100條數(shù)據(jù)。	限制展示的條數(shù)可能不全，搜索需要多搜索點(diǎn)內(nèi)容
方案2	分頁(yè)方式，通過(guò)指令實(shí)現(xiàn)上拉加載，不斷上拉數(shù)據(jù)展示數(shù)據(jù)。	僅過(guò)濾加載出來(lái)的數(shù)據(jù)，需要配合filterMethod過(guò)濾數(shù)據(jù)
方案3	options列表采用虛擬列表實(shí)現(xiàn)。	成本高，需要引入虛擬列表組件或者自己手寫(xiě)

方案一，青銅段位 filterMethod直接過(guò)濾數(shù)據(jù)量

<template>
    <el-select 
      v-model="value" 
      clearable filterable 
      :filter-method="filterMethod">
      <el-option
        v-for="(item, index) in options.slice(0, 100)"
        :key="index"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
 </template>
 export default {
  name: 'Demo',
  data() {
    return {
      options: [],
      value: ''
    }
  },
  beforeMount() {
    this.getList();
  },
  methods: {
    // 模擬獲取大量數(shù)據(jù)
    getList() {
      for (let i = 0; i < 25000; i++) {
        this.options.push({label: "選擇"+i,value:"選擇"+i});
      } 
    },
    filterMethod(val) {
      console.log('filterMethod', val);
      this.options = this.options.filter(item => item.value.indexOf(val) > -1).slice(0, 100);
    },
    visibleChange() {
      console.log('visibleChange');
    }
  }
}

方案二、白銀段位自定義滾動(dòng)指令，實(shí)現(xiàn)翻頁(yè)加載

寫(xiě)自定義滾動(dòng)指令，options列表滾動(dòng)到底部后，再加載下一頁(yè)。但這時(shí)候篩選出來(lái)的是已經(jīng)滾動(dòng)出來(lái)的值。

這里如果直接使用filterable來(lái)搜索，搜索出來(lái)的內(nèi)容是已經(jīng)滑動(dòng)出來(lái)的內(nèi)容。如果想篩選全部的，就需要重寫(xiě)filterMethod方法來(lái)自定義過(guò)濾功能?？梢愿鶕?jù)情況選擇是否要重寫(xiě)filterMethod。

<template>
  <div class="dashboard-editor-container">
    <el-select 
      v-model="value" 
      clearable
      filterable 
      v-el-select-loadmore="loadMore"
      :filter-method="filterMethod">
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'Demo',
  data() {
    return {
      options: [],
      value: '',
      pageNo: 0
    }
  },
  beforeMount() {
    this.getList();
  },
  methods: {
    // 模擬獲取大量數(shù)據(jù)
    getList() {
      const data = [];
      for (let i = 0; i < 25000; i++) {
        data.push({label: "選擇"+i,value:"選擇"+i});
      }
      this.allData = data;
      this.data = data;
      this.getPageList()
    },
    getPageList(pageSize = 10) {
      this.pageNo++;
      const list = this.data.slice(0, pageSize * (this.pageNo));
      this.options = list;
    },
    loadMore() {
      this.getPageList();
    },
    filterMethod(val) {
      this.data = val ? this.allData.filter(item => item.label.indexOf(val) > -1) : this.allData;
      this.getPageList();
    }
  },
  directives:{
    'el-select-loadmore':(el, binding) => {
      // 獲取element-ui定義好的scroll父元素
      const wrapEl = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
      if(wrapEl){
        wrapEl.addEventListener("scroll", function () {
          /**
           * scrollHeight 獲取元素內(nèi)容高度(只讀)
           * scrollTop 獲取或者設(shè)置元素的偏移值,
           *  常用于:計(jì)算滾動(dòng)條的位置, 當(dāng)一個(gè)元素的容器沒(méi)有產(chǎn)生垂直方向的滾動(dòng)條, 那它的scrollTop的值默認(rèn)為0.
           * clientHeight 讀取元素的可見(jiàn)高度(只讀)
           * 如果元素滾動(dòng)到底, 下面等式返回true, 沒(méi)有則返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          if (this.scrollTop + this.clientHeight >= this.scrollHeight) {
            // binding的value就是綁定的loadmore函數(shù)
            binding.value();
          }
        });
      }
    },
  },
}
</script>
</script>

方案三、黃金段位- 虛擬列表

引入社區(qū)的vue-virtual-scroll-list 支持虛擬列表。但這里想的自己再實(shí)現(xiàn)一遍虛擬列表，后續(xù)再寫(xiě)吧。

<template>
  <div class="dashboard-editor-container">
    <el-select 
      v-model="value" 
      clearable
      filterable >
      <virtual-list
          class="list"
          style="height: 360px; overflow-y: auto;"
          :data-key="'value'"
          :data-sources="data"
          :data-component="item"
          :estimate-size="50"
        />
    </el-select>
  </div>
</template>
<script>
import VirtualList from 'vue-virtual-scroll-list';
import Item from './item';
export default {
  name: 'Demo',
  components: {VirtualList, Item},
  data() {
    return {
      options: [],
      data: [],
      value: '',
      pageNo: 0,
      item: Item,
    }
  },
  beforeMount() {
    this.getList();
  },
  methods: {
    // 模擬獲取大量數(shù)據(jù)
    getList() {
      const data = [];
      for (let i = 0; i < 25000; i++) {
        data.push({label: "選擇"+i,value:"選擇"+i});
      }
      this.allData = data;
      this.data = data;
      this.getPageList()
    },
    getPageList(pageSize = 10) {
      this.pageNo++;
      const list = this.data.slice(0, pageSize * (this.pageNo));
      this.options = list;
    },
    loadMore() {
      this.getPageList();
    }
  }
}
</script>
// item組件
<template>
    <el-option :label="source.label" :value="source.value"></el-option>
</template>
  <script>
  export default {
    name: 'item',
    props: {
      source: {
        type: Object,
        default() {
          return {}
        }
      }
    }
  }
  </script>
  <style scoped>
  </style>