基于element-ui中el-select下拉框选项过多怎么优化

element-ui中el-select下拉框选项过多

el-select中options数据超过3000条就会造成前端页面明显卡顿，本次我的遇到的业务场景数据是近2w条，因此在不优化的情况下页面压根无法使用，下面给出我的优化过程。

一种优化思路

element-ui的select有一个remote-method，支持远程搜索，我们让服务端支持一下不就可以了，当然这是一种解决的方案。

但是有时候这种方法对我并能够不适用，因为这样会出现回显问题，回显的时候是还需拿到所需option；

我的做法

element-ui的select有一个fildter-method方法，我们可以通过这个方法来进行过滤下拉项

假设我们有个下拉框是用来选择用户的

在这里将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方法使用模糊搜索

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