欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于element-ui中el-select下拉框選項過多的優(yōu)化方案

 更新時間:2023年04月23日 09:55:02   作者:張賀_  
這篇文章主要介紹了基于element-ui中el-select下拉框選項過多的優(yōu)化方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

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

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

一種優(yōu)化思路

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

但是有時候這種方法對我并能夠不適用,因為這樣會出現(xiàn)回顯問題,回顯的時候是還需拿到所需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數(shù)據(jù)及過濾方法:

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下拉框數(shù)據(jù)過多,用pinyin-match實現(xiàn)拼音、首字母、漢字等模糊搜索

人狠話不多,上圖!

pinyin-match庫

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

特好用的,這個庫的作者是個好心人啊,既然好東西也不能藏著,分享給大家!

在線演示:http://laosep.top/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="請選擇"  style="width: 180px" >
	   <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:[],//下拉框所有數(shù)據(jù)
          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)
		               }
		             })
		             //搜索到相應的數(shù)據(jù)就把符合條件的n個數(shù)據(jù)賦值brand 
		             this.brand = result
		         }else{
		           //沒有搜索到數(shù)據(jù),就還展示所有的brand 
		           this.brand = this.copyBrand
		         }
		      },
        }
    }
    
</script>

這樣就可以實現(xiàn)下拉框選擇器的拼音、字母以及漢字的模糊搜索啦!

總結

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • 解決npm安裝錯誤:No matching version found for XXX@3.3.6問題

    解決npm安裝錯誤:No matching version found for&

    這篇文章主要介紹了解決npm安裝錯誤:No matching version found for XXX@3.3.6問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue項目報錯:Missing?script:"serve"的解決辦法

    vue項目報錯:Missing?script:"serve"的解決辦法

    這篇文章主要給大家介紹了關于vue項目報錯:Missing?script:"serve"的解決辦法,"missing script: serve"是一個錯誤信息,意味著在執(zhí)行啟動腳本時,找不到名為"serve"的腳本,需要的朋友可以參考下
    2023-11-11
  • vue中echarts視圖不更新問題及解決

    vue中echarts視圖不更新問題及解決

    這篇文章主要介紹了vue中echarts視圖不更新問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • vue3時間插件之Moment.js使用教程

    vue3時間插件之Moment.js使用教程

    這篇文章主要給大家介紹了關于vue3時間插件之Moment.js使用的相關資料,需要的朋友可以參考下
    2023-09-09
  • vue之組件內(nèi)監(jiān)控$store中定義變量的變化詳解

    vue之組件內(nèi)監(jiān)控$store中定義變量的變化詳解

    今天小編就為大家分享一篇vue之組件內(nèi)監(jiān)控$store中定義變量的變化詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue在線動態(tài)切換主題色方案

    vue在線動態(tài)切換主題色方案

    這篇文章主要介紹了vue在線動態(tài)切換主題色方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-03-03
  • 如何在vite里獲取env環(huán)境變量淺析

    如何在vite里獲取env環(huán)境變量淺析

    開發(fā)中經(jīng)常會使用環(huán)境變量,Vite相比于Webpack也有一定的變化,下面這篇文章主要給大家介紹了關于如何在vite里獲取env環(huán)境變量的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-10-10
  • VUE + OPENLAYERS實現(xiàn)實時定位功能

    VUE + OPENLAYERS實現(xiàn)實時定位功能

    本系列文章介紹一個簡單的實時定位示例,基于VUE + OPENLAYERS實現(xiàn)實時定位功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2021-09-09
  • Vue.js組件使用開發(fā)實例教程

    Vue.js組件使用開發(fā)實例教程

    Vue.js的組件可以理解為預先定義好了行為的ViewModel類。這篇文章主要介紹了Vue.js組件使用開發(fā)實例教程的相關資料,需要的朋友可以參考下
    2016-11-11
  • 查找Vue中下標的操作(some和findindex)

    查找Vue中下標的操作(some和findindex)

    這篇文章主要介紹了查找Vue中下標的操作(some和findindex),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08

最新評論