1.为什么使用远程搜索？
下拉选择时数据量太大，会导致页面卡顿。使用远程搜索可以解决。
2. 初始值只设置value（v-model）没有用？
在远程搜索中，设置初始值时，由于 v-model 是根据下拉框的数据来显示所对应的 label 值。
没有点击选择框时，调用远程搜索函数 remote-method 未被调用，下拉数据是空的，导致 v-model 无法显示对应的label。
下面的例子只设置了v-model，选择框默认选择显示是value值。
3. 解决方法
设置 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>
