【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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

• 如果希望使用其他的搜索逻辑，可以通过传入一个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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

这时候就是用的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" 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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