vue element-ui 实现可输入的选择下拉框

最新推荐文章于 2024-07-31 10:29:53 发布

xi邮lj

最新推荐文章于 2024-07-31 10:29:53 发布

阅读量5.8k

点赞数 3

分类专栏： vue 文章标签： vue vue.js 输入下拉框

本文链接：https://blog.csdn.net/lj121829/article/details/123848411

版权

vue 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

<template>
  <el-select
    v-model="value"
    filterable 
    allow-create 
    :filter-method="filterMethod"
    default-first-option 
    clearable    
    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: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }, {
        value: 'JavaScript',
        label: 'JavaScript'
      }],
      value: ''
    }
  },
  methods: {
    filterMethod (val) {
      this.value = val
    }
  }
}
</script>

filterable

是否可搜索

allow-create 是否允许用户创建新条目，需配合 filterable 使用

filter-method

自定义搜索方法

default-first-option 在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用