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

作者:张贺_ 时间:2023-07-02 17:00:50 

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实现拼音、首字母、汉字等模糊搜索

人狠话不多,上图!

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

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>

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

来源:https://blog.csdn.net/weixin_41849462/article/details/103234336

标签:element-ui,el-select,下拉框,选项
0
投稿

猜你喜欢

  • python保存图片的四个常用方法

    2023-10-03 15:06:37
  • python实现生成Word、docx文件的方法分析

    2021-03-01 07:49:53
  • Django实现简单网页弹出警告代码

    2022-12-31 06:56:16
  • Python元组的定义及使用

    2021-06-30 01:24:40
  • Python 给某个文件名添加时间戳的方法

    2023-02-10 21:12:56
  • Python调整matplotlib图片大小的3种方法汇总

    2023-11-28 13:20:26
  • Python 序列的方法总结

    2021-12-12 11:14:23
  • Python的运算符重载详解

    2022-08-19 21:51:52
  • 聊聊Druid register mbean error的问题

    2022-09-15 19:09:00
  • Python线程池thread pool创建使用及实例代码分享

    2022-02-26 00:43:35
  • python 非递归解决n皇后问题的方法

    2023-07-06 09:38:05
  • 详解git submodule使用以及注意事项

    2023-04-30 21:11:30
  • Apache SkyWalking 监控 MySQL Server 实战解析

    2024-01-24 01:31:54
  • Python 字符串转换为整形和浮点类型的方法

    2021-09-02 00:09:31
  • python 装饰器功能以及函数参数使用介绍

    2022-04-03 05:12:32
  • Python深入学习之闭包

    2022-11-09 05:27:48
  • pytorch_pretrained_bert如何将tensorflow模型转化为pytorch模型

    2022-04-18 18:07:58
  • SqlServer 在事务中获得自增ID的实例代码

    2024-01-24 19:27:36
  • 简述MySQL InnoDB存储引擎

    2024-01-28 09:26:16
  • 让css使网页图片半透明

    2007-02-03 11:39:00
  • asp之家 网络编程 m.aspxhome.com