Select (Element UI) 远程搜索设置初始值

1.为什么使用远程搜索？

下拉选择时数据量太大，会导致页面卡顿。使用远程搜索可以解决。

2. 初始值只设置value（v-model）没有用？

在远程搜索中，设置初始值时，由于 v-model 是根据下拉框的数据来显示所对应的 label 值。

没有点击选择框时，调用远程搜索函数 remote-method 未被调用，下拉数据是空的，导致 v-model 无法显示对应的label。
下面的例子只设置了v-model，选择框默认选择显示是value值。

设置 v-model 之后，调用远程搜索方法 remote-method

显示效果和完整代码（注释部分即新加的代码）

<template>
    <el-select
            v-model="value9"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
    >
        <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
</template>

<script>
    export default {
        data() {
            return {
                options4: [],
                value9: [],
                list: [],
                loading: false,
                states: [
                    {
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }
                ]
            }
        },
        mounted() {
            this.list = this.states.map(item => {
                return { value: item.value, label: item.label };
            });
            this.value9.push(this.list[0].value);
            this.remoteMethod(this.list[0].label);//标签赋值前先调用远程搜索函数
 },
        methods: {
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.options4 = this.list.filter(item => {
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.options4 = [];
                }
            }
        }
    }
</script>

<style scoped>

</style>