基于element-ui中el-select下拉框選項過多怎么優化

這篇“基于element-ui中el-select下拉框選項過多怎么優化”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“基于element-ui中el-select下拉框選項過多怎么優化”文章吧。

element-ui中el-select下拉框選項過多

el-select中options數據超過3000條就會造成前端頁面明顯卡頓，本次我的遇到的業務場景數據是近2w條，因此在不優化的情況下頁面壓根無法使用，下面給出我的優化過程。

一種優化思路

element-ui的select有一個remote-method，支持遠程搜索，我們讓服務端支持一下不就可以了，當然這是一種解決的方案。

但是有時候這種方法對我并能夠不適用，因為這樣會出現回顯問題，回顯的時候是還需拿到所需option；

我的做法

element-ui的select有一個fildter-method方法，我們可以通過這個方法來進行過濾下拉項

假設我們有個下拉框是用來選擇用戶的

<el-select
  v-model="userId"
  filterable
  :filter-method="userFilter"
  clearable>
  <el-option
    v-for="item in userList"
    :key="item.userId"
    :label="item.username"
    :value="item.userId"
  ></el-option>
</el-select>

在這里將userId封裝成v-model：

props: {
        value: {
            type: [String, Number],
            default: ''
        }
    },
computed: {
        userId: {
            get () {
                return this.value || ''
            },
            set (value) {
                this.$emit('input', value)
            }
        }
    },

獲取option數據及過濾方法：

userFilter(query = '') {
  let arr = this.allUserList.filter((item) => {
    return item.username.includes(query) || item.userId.includes(query)
  })
  if (arr.length > 50) {
    this.userList = arr.slice(0, 50)
  } else {
    this.userList = arr
  }
},
getUserWhiteList() {
  HttpRequest.post("/api/admin/community/getUserWhiteList").then(
    response => {
      this.allUserList = response.data.list;
      this.userFilter()
    }
  );
},

需要注意的是在回顯時要從總的option（allUserList）中拿到所需要會顯的值，并加入到顯示的option（userList）中：

addValueOptions () {
            if (this.userId) {
                let target = this.allUserList.find((item) => { // 從大option中找到當前條
                    return item.value === this.userId
                })
                if (target) { // 將當前條與小option比對，沒有則加入
                    if (this.userList.every(item => item.value !== target.value)) {
                        this.userList.unshift(target)
                    }
                }
            }
        },

ok，問題解決。

element-ui中el-select下拉框數據過多，用pinyin-match實現拼音、首字母、漢字等模糊搜索

人狠話不多，上圖！

pinyin-match庫

也是項目需要，由于下拉框的數據過多，使用人員不好選擇，就做個拼音，大小寫字母以及漢字的模糊搜索，結果就找到來這個 pinyin-match庫，能夠使用拼音快速檢索目標。

在項目中的使用步驟

第一步：安裝pinyin-match

// 安裝 pinyin-match npm install pinyin-match --save

第二步：在需要的組件中使用

利用el-select的filterable 屬性和filter-method方法使用模糊搜索

<template>
	<el-select v-model="formInline.brandId" @change="changeBrand" filterable :filter-method="pinyingMatch" placeholder="請選擇"   >
	   <el-option :label="item.label" :value="item.value" v-for="(item,index ) in brand" :key="item.value"></el-option>
	</el-select>
</template>

<script>
    export default{
        data(){
          return{
          brand:[],//下拉框所有數據
          copyBrand:[]
          }
        },
        methods:{
            //獲取所有的品牌
             async getBrand(){
	            const response = await reqLimitBranch()
	            this.brand = response.data
	            //把所有的品牌在賦值copyBrand
	            this.copyBrand = this.brand
              },
		          //下拉框設置拼音模糊搜索
		      pinyingMatch(val){
		         const pinyingMatch = require('pinyin-match')
		         if(val){
		             var result = []
		             //
		             this.copyBrand.forEach( e => {
		               var m = pinyingMatch.match(e.label, val)
		               if( m){
		                   result.push(e)
		               }
		             })
		             //搜索到相應的數據就把符合條件的n個數據賦值brand 
		             this.brand = result
		         }else{
		           //沒有搜索到數據，就還展示所有的brand 
		           this.brand = this.copyBrand
		         }
		      },
        }
    }
    
</script>

這樣就可以實現下拉框選擇器的拼音、字母以及漢字的模糊搜索啦！

以上就是關于“基于element-ui中el-select下拉框選項過多怎么優化”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。