使用elementUI对下拉框进行模糊查询

最新推荐文章于 2024-05-07 15:39:30 发布

weixin_42378072

最新推荐文章于 2024-05-07 15:39:30 发布

阅读量2.9k

点赞数 4

分类专栏：前端下拉框模糊查询文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_42378072/article/details/117022074

版权

本文介绍了如何利用elementUI在前端实现下拉框的模糊查询功能。当选项过多时，通过设置特定属性，可以方便用户通过输入字符快速找到所需选项。

摘要由CSDN通过智能技术生成

使用elementUI对下拉框进行模糊查询

背景：有的时候下拉框中的内容很多，有的options数据多达上百条，就需要我们在select中可输入字符进行模糊查询，在添加一个属性就可完成这个需求，代码如下：

<el-select

  style="width: 100%;margin:6px 0"
  :size="size"
  filterable //该属性完成对下拉框中内容过滤匹配(模糊查询)
  @change="dataChange"
  :placeholder="$t('inOrder.pleaseChoose')"
  v-model

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_42378072

关注关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

elementPlus下拉框实现自定义模糊查询且100%匹配的优先展示

蜗牛~~

01-16

923

里面只需要修改对应的参数即可。100%匹配的同样会优先展示。创建人就会显示在创建时间。创建时间在创建人之上。

el-select是实现文本模糊匹配功能

最新发布

2401_85908455的博客

09-05

480

【代码】el-select是实现文本模糊匹配功能。

2 条评论您还未登录，请先登录后发表或查看评论

element-ui封装的带模糊查询的下拉框

Sk22582的博客

08-16

969

【代码】element-ui封装的带模糊查询的下拉框。

elementui+vue通过下拉框多选字段进行搜索模糊匹配

m0_58462450的博客

05-07

817

在SQL中直接使用如'["01"]'这样的字符串，并尝试通过CONCAT函数将其嵌入到LIKE模式中通常是不直接支持的，特别是当数据库期望的是一个简单的百分号（%）引导的模式时,对于这种情况，需要对SQL语句进行更复杂的处理，因为LIKE和CONCAT无法直接处理数组。在这里，我们使用 or，意味着在每个 LIKE 条件之间添加 OR，形成类似 (nature like '%value1%' or nature like '%value2%' ...) 的结构。将数组转换成了以逗号分隔的字符串。

vue+elementui的搜索下拉框进行模糊查询

alone203的博客

03-17

1606

首先要在el-select标签中加一个filterable属性，让下拉框可以搜索。el-option中再这样写，就可以模糊查询了。

element-ui 模糊查询功能

m0_67778061的博客

09-27

2064

当搜索到数据显示的内容 selected为选中对象利用filter去过滤。通过接口获取到我们所需的数据,这里我们写了一组假数据。这个是全字匹配，直接官网拿来就好。

进行模糊查询+多选功能的下拉框（select）模糊加载

05-26

"进行模糊查询+多选功能的下拉框（select）模糊加载"是一个针对前端表单元素优化的实践，旨在提供更好的用户体验。传统的HTML `<select>` 元素虽然简单易用，但其功能相对有限，无法满足复杂的用户需求，例如模糊...

vue elementUI 数据联想类似百度的模糊查询

qq_42897782的博客

12-10

1981

一般下拉框可以满足需求，数据量大的时候下拉框太长不好看，这时候就需要模糊查询 如下图：后端返回的数据格式不太对，所以需要自己手动整理，这里整理的数据必须有一个value项，可能是组件的限制组件 <el-form-item label="职工代码" prop="zgdm"> <el-autocomplete class="inline-input" ..

elementui下拉框选择图片_Element-UI中Select选择器详解

weixin_39969006的博客

12-19

1673

image前言最近开发的后台管理系统项目采用Vue+Element-UI技术架构，在使用Elment-UI中Select组件的时候遇到了比较多的操作难题，官网上关于这个组件的使用文档介绍的不是很详细，仅仅提供了一些基本用法，很多拓展场景都没有涉及到，在查阅了大量资料之后终于将目前的需求都完美解决了，这里整理一些Select组件的使用方案，希望能帮到有同样需求的同学。项目已上传github，欢迎大家...

基于vue + elementUI 的滚动触发后台数据接口分页的单选组件select-pro，带模糊查询

LANHITS的博客

08-02

410

滚动分页后台请求 select 模糊查询

基于elementui封装的一个VUE筛选下拉框

08-09

基于element-ui封装的一个VUE筛选下拉框

inputsearch:关于element UI 的input搜索下拉框的两种匹配方式

05-14

inputsearch input search function querySearch(queryString, cb) { var restaurants = this.restaurants; var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; // 调用 callback 返回建议列表的数据 cb(results); }, createFilter(queryString) { return (restaurant) => { return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase())

Vue + Element-ui的下拉框el-select获取额外参数详解

10-14

主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

使用Element-ui及pinyin-match插件实现select下拉框模糊查询

weixin_51527055的博客

01-18

570

当我们使用elementui中的select下拉框时当options中的数据时中文，当我们输入英文时也可以获取到中文关键字改变下拉框对应的内容 1.先下载pinyin-match插件 (npm install pinyin-match --save) 2.代码展示 <el-select v-model="form.members" multiple filterable

elment ui 实现模糊查询

妄想症患者的博客

06-14

397

elment ui 实现模糊查询

elementUI中处理模糊搜索

yizhifeidong的博客

09-27

1072

elementUI中处理模糊搜索。

Element UI input输入框实现模糊查询

m0_58565372的博客

06-30

8534

Element UI的input输入框进行搜索的时候（根据输入内容提供对应的输入建议）有个坑，它只能用第一个字进行搜索，不能够实现模糊匹配，下面的方法就是填这个坑。原来搜“奖”，后台给返回数据，但是不会出现下拉框。例如：只要搜“抽”才出现下拉框 解决后实现效果：代码如下：重点：如果使用Element UI里面的......

vue+element uiinput输入框实时搜索（输入框搜索功能，模糊查询）+下拉展示+点击定位菜单项高亮并显示对应内容

galaxyJING的博客

02-23

1656

【代码】vue+element uiinput输入框实时搜索（输入框搜索功能，模糊查询）+下拉展示+点击定位菜单项高亮并显示对应内容。

使用什么修改elementUI里面下拉框的宽度

06-10

要修改 ElementUI 下拉框的宽度，可以通过覆盖其默认的样式来实现。具体步骤如下： 1. 打开 ElementUI 官网，找到下拉框的文档页面，查看其默认样式的类名。 2. 在自己的样式文件中添加对应的类名，并修改其属性值。例如，要修改下拉框的宽度，可以这样写： ``` .el-select { width: 200px; } ``` 或者，如果要修改下拉框的最大宽度，可以这样写： ``` .el-select { max-width: 200px; } ``` 3. 如果样式没有生效，可以在样式文件中加上 `!important` 声明，例如： ``` .el-select { width: 200px !important; } ``` 注意，修改下拉框的宽度可能会影响到其它样式，建议进行充分的测试。