<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 使用

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐