el-select搜索选项

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

1. 本地搜索（label）

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

  • 为el-select添加filterable属性即可启用搜索功能。
  • 默认情况下，Select 会找出所有label属性包含输入值的选项。
<template><el-select v-model="value" filterable placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></template><script>export default {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-select v-model="value" filterable placeholder="请选择" :filter-method="filterValue"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></template><script>export default {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-select v-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>export default {data() {return {value: '',options: [], // 选项，从后端传递过来loading:false}},/* 获取选项列表 */getDatas(key) {this.loading = true;datasGetByKeywords({ // 封装好的后端接口 keywords: key || "", // 关键字参数}).then((res) => {this.loading = false;this.options = res.data;});},}</script>

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