一.项目需求

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

二.用到的组件方法介绍

三.代码

<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>