el-select 的优化

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

研究过el的都知道：el-select中options数据超过3000条就会造成前端页面明显卡顿，那我将业务场景数据提升至近2w条，很明显 —— 在不优化的情况下页面压根无法使用。

有两种解决方法：

1. element-ui的select有一个remote-method，支持远程搜索，我们让服务端支持一下不就可以了，当然这是一种解决的方案。但是有时候这种方法对我并能够不适用，因为这样会出现回显问题，回显的时候是还需拿到所需option；
2. 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)
            }
        }
    }
},

在项目中，我们需要运用到很多来自后端返回的数据。有时是上百条，有时甚至上千条。如果加上后端的多表查询或者数据量过大，这就导致在前端的显示就会及其慢，特别是在网络不好的时候更是如此。