Element-ui的el-select 选择器，filterable-可输入文字进行筛选功能快速查找选项，clearable-可以清空当前选择项

栖身星河之中

已于 2022-03-03 10:12:44 修改

阅读量2.3w

点赞数 7

分类专栏： vue 文章标签： vue.js javascript elementui

于 2022-02-28 16:12:22 首次发布

本文链接：https://blog.csdn.net/ml12818/article/details/123184819

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、为 el-select 添加 filterable 属性即可启用筛选功能。

默认情况下，Select 会找出所有 label 属性包含输入值的选项。
如果希望使用其他的搜索逻辑，可以通过传入一个 filter-method 来实现。 filter-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。

//官方代码：
<template>
  <el-select v-model="value" filterable placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>
//项目代码
<template>
  <el-select style="width: 100%;"
                     v-if="type==='add'"
                     @focus="remoteMethod2('')"
                     v-model="form.sugarCode"
                     filterable
                     placeholder="输入关键字进行搜索"
                     :remote-method="remoteMethod2"
                     :loading="farmer_loading"
          >
            <el-option
                v-for="item in varietyInfo"
                :key="item.sugarCode"
                :label="item.sugarName"
                :value="item.sugarCode"
            >
            </el-option>
          </el-select>
</template>

如图所示
在这里插入图片描述

2、为 el-select 添加 clearable属性即可启用清空功能。

官方代码：
<template>
  <el-select v-model="value" filterable clearable placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>
//项目代码
<template>
 <el-select style="width: 100%;"
                     v-if="type==='edit'"
                     @focus="remoteMethod2('')"
                     v-model="form.sugarCode"
                     placeholder="输入关键字进行搜索"
                     :remote-method="remoteMethod2"
                     :loading="farmer_loading"
                     filterable
                     clearable

          >
            <el-option
                v-for="item in varietyInfo"
                :key="item.sugarCode"
                :label="item.sugarName"
                :value="item.sugarCode"
            >
            </el-option>
          </el-select>
</template>