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解决问题。