一.项目需求
下拉框下拉列表数据是由后端返回的，而且他会变化，所以数据不是写死的而且数据量大。上一篇博客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>
