vue element-ui 下拉菜单带搜索框

最新推荐文章于 2025-06-20 14:48:22 发布

一名写前端的GISer

最新推荐文章于 2025-06-20 14:48:22 发布

阅读量9.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： ElementUI

原文链接：https://blog.youkuaiyun.com/fangge_/article/details/102818569?utm_medium=distribute.pc_relevant_right.none-task-blog-BlogCommendFromMachineLearnPai2-1&depth_1-utm_source=distribute.pc_relevant_right.none-task-blog-BlogCommendFromMachineLearnPai2-1

ElementUI 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个基于Vue框架的动态下拉搜索组件的实现细节，该组件能够实时过滤并显示与输入文本匹配的选项。通过使用v-model进行双向数据绑定，以及通过keyup事件触发的dropDownSearch方法来更新显示的选项列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="common-wrapper">
    <el-select v-model="valueMeta" multiple collapse-tags placeholder="请选择标签">
      <div class="el-input" style="width:90%;margin-left:5%;">
        <input type="text" placeholder="请输入" class="el-input__inner" v-model="dropDownValue" @keyup="dropDownSearch">
      </div>
      <el-option v-for="item in optionsMetaShow" :value="item"></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dropDownValue: '',
      optionsMetaAll: ['黄金糕', '双皮奶', '蚵仔煎', '双皮奶2', '龙须面', '北京烤鸭'],
      optionsMetaShow: ['黄金糕', '双皮奶', '蚵仔煎', '双皮奶2', '龙须面', '北京烤鸭'],
      valueMeta: []
    }
  },
  methods: {
    dropDownSearch () {
      var _this = this;
      _this.valueMeta = [];
      _this.optionsMetaShow = _this.optionsMetaAll.filter(_this.filterSearch);
    },
    filterSearch (item) {
      return item.includes(this.dropDownValue);
    },
  }
}
</script>
<style lang="">
.el-scrollbar {
  display: block !important;
}
</style>