【项目经验】：项目中下拉框数据太多造成页面卡顿（二）

一.项目需求

        下拉框下拉列表数据是由后端返回的，而且他会变化，所以数据不是写死的而且数据量大。上一篇博客http://t.csdn.cn/sSNTa我们是用的数据懒加载的方式，这次我们使用远程搜索的方式解决这个问题。

二.用到的组件方法介绍

filterable

是否可搜索

boolean

—

false

remote

是否为远程搜索

boolean

—

false

remote-method

远程搜索方法

function

—

—

三.代码

<template>
    <div class="content">
        <el-select v-model="value" filterable remote placeholder="请输入关键词" :remote-method="remoteMethod" @change="change">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>


    </div>
</template>

<script>
export default {
    name: "list",
    data () {
        return {
            options: [],
            value: "",
            list: [],
            loading: false,
            states: []
        }
    },


    methods: {
        init () {
            for (let i = 0; i < 10000; i++) {
                let obj = {
                    value: `"${i}"`,
                    label: `数据${i}`
                };
                this.states.push(obj);
            }
            this.options = this.states.slice(0, 50);
            // console.log(this.options);
        },
        remoteMethod (val) {
            console.log("val", val);
            this.$axios(url, { val: val }).then(res => {
                // 后端通过模糊查询返回，也可以前端自己查
                this.options = res
            })
        },
        // 每次选中的下次打开显示到第一个
        change (val) {
            let index = this.states.findIndex(item => {
                return item.value == this.value;
            })
            this.states.unshift(this.states.splice(index, 1));
        }


    },
    mounted () {
        this.init()
    }
}
</script>

<style scoped></style>