【Element】el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索

el-select搜索选项

• 当我们有多个选项时，我们一般会使用下拉选择器el-select展示选项，选项不多的情况下，我们可以进行手动下拉选择。
• 那当选项有100个，甚至1000个的时候，需要一个个找选项，手动下拉选择就太累了，这时候我们可以利用搜索功能快速查找选项

1. 本地搜索（label）

可以利用搜索功能快速查找选项

• 为el-select添加filterable属性即可启用搜索功能。
• 默认情况下，Select 会找出所有label属性包含输入值的选项。

<template><el-selectv-model="value"filterableplaceholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></template><script>exportdefault{data(){return{options:[{value:'选项1',label:'黄金糕'},{value:'选项2',label:'双皮奶'},{value:'选项3',label:'蚵仔煎'},{value:'选项4',label:'龙须面'},{value:'选项5',label:'北京烤鸭'}],value:''}}}</script>

• 如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。比如我们想用value来作为关键词搜索

<template><el-selectv-model="value"filterableplaceholder="请选择":filter-method="filterValue"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></template><script>exportdefault{data(){return{list:[{value:'选项1',label:'黄金糕'},{value:'选项2',label:'双皮奶'},{value:'选项3',label:'蚵仔煎'},{value:'选项4',label:'龙须面'},{value:'选项5',label:'北京烤鸭'}],value:'',options:[]// 筛选出来的选项}},mounted(){this.option =this.list;},methods:{filterValue(query){if(query !==""){this.options =this.list.filter((item)=>{// 这里是用的value选项筛选，默认是labelreturn item.value.toLowerCase().indexOf(query.toLowerCase())>-1;});}else{this.options =[];}}}}</script>

这时候就是用的value来搜索了

2. 远程搜索（结合后端接口）

从服务器搜索数据，输入关键字进行查找

• 为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。
• remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。
• 需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。

<template><el-selectv-model="value"clearablefilterableremote:remote-method="getDatas":loading="loading"placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></template><script>exportdefault{data(){return{value:'',options:[],// 选项，从后端传递过来loading:false}},/* 获取选项列表 */getDatas(key){this.loading =true;datasGetByKeywords({// 封装好的后端接口keywords: key ||"",// 关键字参数}).then((res)=>{this.loading =false;this.options = res.data;});},}</script>

这样我们的选项就是从后端服务器上获取的了，如何搜索就按后端接口规定的参数来