【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下拉选择器搜索选项,自定义搜索方法,结合后端接口远程搜索_第1张图片

  • 如果希望使用其他的搜索逻辑,可以通过传入一个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张图片

2. 远程搜索(结合后端接口)

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

  • 为了启用远程搜索,需要将filterableremote设置为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>

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

你可能感兴趣的:(前端,Vue,elementUI,vue.js,javascript,前端)