基于element-ui中el-select下拉框选项过多的优化方案

 更新时间:2023年04月23日 09:55:02   作者:张贺_  
这篇文章主要介绍了基于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库,能够使用拼音快速检索目标。

特好用的,这个库的作者是个好心人啊,既然好东西也不能藏着,分享给大家!

在线演示: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:[],//下拉框所有数据
          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>

这样就可以实现下拉框选择器的拼音、字母以及汉字的模糊搜索啦!

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue elementUI tree树形控件获取父节点ID的实例

    vue elementUI tree树形控件获取父节点ID的实例

    今天小编就为大家分享一篇vue elementUI tree树形控件获取父节点ID的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue form表单使用resetFields函数出现的问题

    vue form表单使用resetFields函数出现的问题

    这篇文章主要介绍了vue form表单使用resetFields函数出现的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue项目中的数据变化被watch监听并处理

    vue项目中的数据变化被watch监听并处理

    这篇文章主要介绍了vue项目中的数据变化被watch监听并处理,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue.js 和 MVVM 的注意事项

    Vue.js 和 MVVM 的注意事项

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,Vue.js 是一个提供 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。这篇文章给大家介绍Vue.js 和 MVVM 的注意事项,感兴趣的朋友一起看看吧
    2016-11-11
  • vue中异步数据获取方式(确保数据被获取)

    vue中异步数据获取方式(确保数据被获取)

    这篇文章主要介绍了vue中异步数据获取方式(确保数据被获取),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

    Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

    这篇文章主要介绍了如何在 Vue 中集成 Mozilla/PDF.js ,实现自定义的 PDF 预览器,以及给被预览的 PDF 添加水印
    2021-01-01
  • 在vue-cli项目中如何使用swiper

    在vue-cli项目中如何使用swiper

    这篇文章主要介绍了在vue-cli项目中如何使用swiper问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 解决vue-router在同一个路由下切换,取不到变化的路由参数问题

    解决vue-router在同一个路由下切换,取不到变化的路由参数问题

    今天小编就为大家分享一篇解决vue-router在同一个路由下切换,取不到变化的路由参数问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue祖孙组件之间的数据传递案例

    vue祖孙组件之间的数据传递案例

    这篇文章主要介绍了vue祖孙组件之间的数据传递案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • vue全局引入scss样式文件的过程记录

    vue全局引入scss样式文件的过程记录

    css文件可以直接引入到main.js中,scss文件如果没有scss特殊语法也可以直接引入index.js,只有scss文件中的特殊语法全局引入的时候无法显示,所以需要特殊处理,下面这篇文章主要给大家介绍了关于vue全局引入scss样式文件的相关资料,需要的朋友可以参考下
    2022-11-11

最新评论