Element-ui中el-select选择器实现输入和搜索，可显示输入值的详细讲解

最新推荐文章于 2024-04-07 16:43:50 发布
最新推荐文章于 2024-04-07 16:43:50 发布
阅读量2.5k 收藏 5
点赞数 10
文章标签： vue.js javascript 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63438013/article/details/134512480
版权

一、问题

    在使用el-select选择器中，遇到了如下问题

点击下方下拉框里面的值，才能进行值得显示，但是当你输入一个匹配不上的数据时，等这个in-put失去焦点时，就会把值清空，不会值的完成绑定。如下图

失去焦点后

二、解决问题的办法

参照官网解释

 强制刷新即可赋值完成

 

天道酬勤_smile
关注
  • 10
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
关于el-select的可选择可输入方法
litiane的博客
11-06 4239
el-select中如果使用下拉选择会导致只能选择已有的项，无法自己输入，以下是解决办法： <el-select v-model="loginMsg.account" filterable remote reserve-keyword @change.native="selectBlur"
element ui - el-select 添加可输入功能
nunumaymax的博客
11-23 8632
vue2 + element ui 的项目中，产品希望 el-select 可以支持输入功能，也就说用户既可以下拉选择，也可以输入任意内容。
elementUi可输入Select选择器
最新发布
Skty_ywh的博客
04-07 197
使用elementUi的Select选择器制作一个既可以保存手动输入内容，又可以保存下拉选项框中选中内容的选项框。
el-select 可选择可输入（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
12-15 3403
<el-select v-model=" form.measure_range" filterable placeholder="请选择" @blur="selectBlurC"> <el-option v-for="item in readonlyList" :key="item.value" :label="item.value"
el-select下拉框可输入
qq_42483955的博客
01-26 4426
element-ui中下拉框可输入常用得有两种方法 1.@blur方法：输入内容会去匹配选择项，没匹配中清空输入框 <el-form-item :label="firstClsf" prop="firstClsf"> <el-select style="width:100%" v-model="caseList.firstClsf" @blur="selectBlur" clearable filte
el-select可新增输入，可选择
NIKCFNIF_66666的博客
07-15 7720
最近在做一个功能，客户提出既可以下拉选择名称，也可以自己输入名称。用的el-select自带属性实现，但是需要点击回车才可以实现输入，弄了挺久才想到@input.native事件，通过input事件来赋值，很好的实现了可选择，可输入。1，通过filterable筛选属性，来实现可输入的下拉框。2.失去焦点给输入框赋值。......
el-select实现可下拉选择和手动输入
C422805的博客
07-05 5216
--------------------------------------------------优化----------------------------------------------------------------------我们可以在elementUi官方文档中看到,已经帮我们写好了相应的属性,我们直接使用就可以啦~~~~但是我们写好之后发现没有达到最佳的效果,需要手动去选择或点击回车才能将我们手动输入的值填充到框中。注意搭配filterable使用哦~,不用遗漏了。
el-select 实现 输入搜索 及 选择 功能
木昆灵寒酥的博客
07-04 4366
多选 结果框搜索词 红色加粗
el-select 可选择/可输入，自定义搜索方法
weixin_42255542的博客
11-01 4231
el-select 可选择/可输入，自定义搜索方法
Vue使用el-select下拉框实现可输入可选择，失去焦点时不清空绑定参数
龘
02-09 3362
【代码】Vue使用el-select下拉框实现可输入可选择，失去焦点时不清空绑定参数。
el-select 可输入，可选择
qq_51389137的博客
01-29 883
【代码】el-select 可输入，可选择。
Vue Element 分组+多选+可搜索Select选择器实现示例
12-04
最终效果(http://47.98.205.88:3000/mult_group_selection)见下图。实际就是将element三种官方select实例整合起来，同时实现分组+多选+可搜索，此外点击一级分组名可以实现全选/全不选。供有相关需求的开发者参考 准备工作： 除了vue脚手架、element等必要包之外。该项目还用到了linq.js(https://github.com/mihaifm/linq)，该工具可以快速从数组中查找所需内容。 npm install --save linq 编辑build/webpack.base.conf.js module:{ ...
详解为element-ui的Select和Cascader添加弹层底部操作按钮
10-15
主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解element-ui中el-select的默认选择项问题
12-29
直接绑定将option中的value值绑定给v-model <template> <div> <el v-model=query> <el v-for=item key=item.value value=item.value label=item.label></el> </el> </div> </template> [removed] export default{ data() { return { options: [{ value: '01',
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
如下所示： 我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，应该用 @change=”selectChange()
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element ui —— el-select 添加可输入功能且失焦后自动录入
m0_67841039的博客
07-13 2064
el-select 添加可输入功能且失焦后自动录入
Vue3 - Element Plus 选择器 el-select 既可以选择下拉又可以手动输入文本功能，让 select 选择器同时拥有下拉选择和输入文本（支持手动输入文本和下拉选择）
王佳斌
12-02 7087
vue3，element plus，select选择器，el-select，el-select实现可下拉选择和手动输入，element-plus组件库中选择器怎么像输入框一样可以输入，既可以手输也可以选择，el-select可选择可以手动输入，Vue3使用el-select下拉框实现可输入可选择，el-select可新增输入可选择，vue3使用element plus选择器Select既可以下拉选择也可以手动输入，实现el-select可选择/可输入，怎么能让输入框又能选择又能输入文本，既有下拉功能也有输入
element-ui中的el-select选择器分页后如何回显
07-13
在element-ui中，el-select选择器分页后，要实现回显可以通过以下步骤： 1. 首先，你需要在el-select中设置一个v-model属性来绑定选择的值。例如： ``` <el-select v-model="selectedValue" :options="options"></el-select> ``` 这里的`selectedValue`是一个用于存储选择的值的变量，`options`是一个包含选项数据的数组。 2. 然后，你需要在分页切换时，将选择的值保存下来。你可以监听el-select的change事件，在事件处理函数中将选择的值赋给`selectedValue`。例如： ``` <el-select v-model="selectedValue" @change="handleSelectChange" :options="options"></el-select> ``` ``` methods: { handleSelectChange(value) { this.selectedValue = value; } } ``` 3. 当切换分页后，你需要根据之前保存的选择的值来设置el-select的选中状态。你可以通过给el-select设置一个`value`属性来实现。例如： ``` <el-select v-model="selectedValue" :value="selectedValue" :options="options"></el-select> ``` 这样，当分页切换后，el-select会根据`selectedValue`的值来自动选中对应的选项。 通过以上步骤，你就可以在el-select选择器分页后实现回显功能了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值