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

这篇具有很好参考价值的文章主要介绍了【Element】el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

el-select搜索选项

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

1. 本地搜索（label）

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

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

<template>
  <el-select v-model="value" filterable placeholder="请选择">
    <el-option
      v-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>

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

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

<template>
  <el-select v-model="value" filterable placeholder="请选择" :filter-method="filterValue">
    <el-option
      v-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.options = this.list;
  },
 	 methods: {
   		 filterValue(query) {
      		if (query !== "") {
        		this.options = this.list.filter((item) => {
          		// 这里是用的value选项筛选，默认是label
          		return item.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
       			});
     		 } else {
       			 this.options = [];
      		 }
   		 }
 	 }
  }
</script>

这时候就是用的value来搜索了
【Element】el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索

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

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

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

<template>
  <el-select v-model="value" clearable
            filterable
            remote
            :remote-method="getDatas"
            :loading="loading" placeholder="请选择"  >
    <el-option
      v-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>