搜索里面分两种精确搜索和模糊搜索，这两个一般情况下取决于后台接口。
这里主要是使用模糊搜索，
首先贴上官网的示例：
为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。
exportdefault{ data() {return{options4: [],value9: [],list: [],loading:false,states: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"] } }, mounted() {this.list =this.states.map(item=>{return{value: item,label: item }; }); },methods: { remoteMethod(query) {if(query !=='') {this.loading =true; setTimeout(()=>{this.loading =false;this.options4 =this.list.filter(item=>{returnitem.label.toLowerCase() .indexOf(query.toLowerCase()) >-1; }); },200); }else{this.options4 = []; } } } } exportdefault{ data() {return{options4: [],value9: [],list: [],loading:false,states: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"] } }, mounted() {this.list =this.states.map(item=>{return{value: item,label: item }; }); },methods: { remoteMethod(query) {if(query !=='') {this.loading =true; setTimeout(()=>{this.loading =false;this.options4 =this.list.filter(item=>{returnitem.label.toLowerCase() .indexOf(query.toLowerCase()) >-1; }); },200); }else{this.options4 = []; } } } } exportdefault{ data() {return{options4: [],value9: [],list: [],loading:false,states: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"] } }, mounted() {this.list =this.states.map(item=>{return{value: item,label: item }; }); },methods: { remoteMethod(query) {if(query !=='') {this.loading =true; setTimeout(()=>{this.loading =false;this.options4 =this.list.filter(item=>{returnitem.label.toLowerCase() .indexOf(query.toLowerCase()) >-1; }); },200); }else{this.options4 = []; } } } }
官网代码1
官网代码2
官网代码3
根据官网提供的基本可以实现，只不过中间模拟了一个替代接口返回的操作
remoteMethod方法中的query这个参数，其实就是你在输入框中实时输入的数据
所以只要在里面写入接口即可
接口返回的值需要一定的处理，把你需要展示的赋值给label,需要传给后台的值则赋值给value,这样的一组值存放在this.list里面，然后在这个数组里面过滤，把最终需要展示的值传给options即可，
具体结合接口的用法如下：
代码1
代码2
效果图
接口返回的数据类似于
[{id:1,name:123,adderss:XXX,mobile:123213123},
{id:2,name:456,adderss:XXX,mobile:123213123},
{id:3,name:789,adderss:XXX,mobile:123213123}]
网友评论