element 中 el-select 中根据已获取数据模糊搜索查询

最新推荐文章于 2024-03-25 14:53:48 发布
最新推荐文章于 2024-03-25 14:53:48 发布
阅读量2.9k 收藏 5
点赞数 5
分类专栏： 前端 element vue 文章标签： 前端 elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58206564/article/details/126387542
版权
前端 同时被 3 个专栏收录
38 篇文章 3 订阅
订阅专栏
vue
10 篇文章 0 订阅
订阅专栏
element
6 篇文章 0 订阅
订阅专栏

1、在项目中需求要根据已获取的数据列表，进行搜索模糊查询，如下图：

2、实现方案：为el-select添加 filterable 属性即可

 根据 element 根据官方文档所描述，为el-select添加  filterable 属性即可启用搜索功能。默认情况下，Select 会找出所有 label属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。

 

 

发与少年
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select下拉模糊查询插件
12-23
带模糊查询的select下拉框，最近做了一个功能，在下拉框中有上千条选项，这种情况下肯定不能一个一个地去找，所以在下拉框中添加了一个模糊查询的功能，很多资料都有各种问题，下面是我实现的完整的实例
element el-select模糊搜索功能
xiaoHelloWord的博客
10-30 6966
这是能查到有数据的 根据输入框的字调取接口查出数据 <el-select v-model="valuee" style="height:30px;margin-right:20px;" filterable remote reserve-keyword .
el-select可搜索，可根据字母检索
最新发布
weixin_50976410的博客
03-25 571
template><el-select v-model="selectedProvince" filterable remote :remote-method="queryProvinces" placeholder="请选择省份"</div></div><script>data() {return {selectedProvince: '', // 绑定选中的省份。
elementUI el-select模糊搜索，固定位置在选择框下面，value绑定对象显示，key显示id
qq_42440919的博客
01-28 2554
elementUI el-select 固定位置 模糊搜索 清空
el-select 模糊查询
weixin_63722092的博客
01-08 650
【代码】el-select 模糊查询。
element -select选择器实现远程模糊搜索
小草莓的博客
11-26 3071
1、element select选择器文档 https://element.eleme.cn/#/zh-CN/component/select 2、效果如何： 3、将该功能封装成组件，代码如下： <template> <div class="courts-select"> <!-- 模糊搜索 --> <el-select v-model="filterValue" clearable fi..
el-select：从字典获取下拉框内容后，自定义下拉框展示内容，并且可以根据value值进行模糊查询
qq_45328656的博客
06-16 2717
{{dict.label}}
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
主要介绍了element-ui 远程搜索组件el-select在项目中组件化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解element-ui中el-select的默认选择项问题
10-16
主要介绍了详解element-ui中el-select的默认选择项问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-select-tree:ElementUI的el-select与el-tree结合
05-07
import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree'...
进行模糊查询+多选功能的下拉框（select） 模糊加载
05-26
自写的一个能进行 模糊查询+多选的下拉框（select） 本人亲测，肯定符合你的要求
select实现模糊查询用到的js和css文件
11-30
select实现模糊查询用到的js和css文件
Vue 使用el-select 实现模糊搜索内嵌tag
weixin_65084919的博客
03-17 693
/ 选中绑定的值 根据你el-option 的:value 来控制选中的值。// 找到符合条件的数组。// 下拉框可以选中的。
el-select模糊查询滚动加载内容
DusHeart的博客
12-26 605
模糊查询出对应得内容后，滚动加载数据。
el-select调用后台接口获取数据、远程搜索、模糊查询方法。
weixin_45422304的博客
09-16 5503
在项目中发现使用el-select时写的比较多重复代码，自己在写项目时写的一个下拉组件，有不足之处请多多指教
element-ui封装的带模糊查询的下拉框
Sk22582的博客
08-16 736
【代码】element-ui封装的带模糊查询的下拉框。
vue3中，封装el-select选择器组件(二)——filterable模糊搜索、watch用法、nextTick用法、toRefs用法、sessionStorage取值、设置基准地址apiUrl
weixin_44867717的博客
09-06 2218
【代码】vue3中，封装el-select选择器组件(二)——filterable模糊搜索、watch用法、nextTick用法、toRefs用法、sessionStorage取值、设置基准地址apiUrl。
初学者教程——select查询_模糊查询
weixin_52980837的博客
06-22 3422
文章目录一、查询结果排序1. “%”通配符可以匹配0到多个任意字符2. “_”通配符匹配任意一个字符二、IN运算符三、between...and运算符下一章节学习——第五章--MySQL函数 模糊查询是利用数据的部分信息进行查找的一种查询方式。如果数据库用户在进行查询实体的全部具体信息，仅知道其部分信息，此时即可使用like运算符进行模糊查询。 提示：以下是本篇文章正文内容，下面案例可供参考 一、查询结果排序 LIKE运算符 代码如下（示例）： 在MySQL中，使用通配符实现like运算。 通配.
el-select结合前端模糊查询
07-11
el-select 是 Element UI 中的一个下拉选择组件，可以结合前端模糊查询实现动态搜索过滤功能。下面是一个示例代码： ```html <template> <div> <el-select v-model="selectedItem" placeholder="请选择" @query-change="handleQueryChange"> <el-option v-for="option in filteredOptions" :key="option.value" :value="option.value" :label="option.label"></el-option> </el-select> </div> </template> <script> export default { data() { return { options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' }, // ... ], selectedItem: '', query: '' }; }, computed: { filteredOptions() { if (this.query) { return this.options.filter(option => option.label.toLowerCase().includes(this.query.toLowerCase()) ); } return this.options; } }, methods: { handleQueryChange(query) { this.query = query; } } }; </script> ``` 在上述示例中，我们使用 `@query-change` 事件监听输入框中的查询变化，并将查询关键词保存在 `query` 变量中。通过计算属性 `filteredOptions`，我们根据 `query` 对选项进行筛选，只显示符合查询条件的选项。 注意，这只是一个简单的示例，实际使用中你可能需要根据具体需求进行修改。同时，你还需要引入 Element UI 库并按照官方文档进行配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值