el-select 设置为可手动输入

最新推荐文章于 2024-12-16 15:40:30 发布
原创 最新推荐文章于 2024-12-16 15:40:30 发布 · 3.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #elementui #el-select

本文介绍如何在Element-UI的下拉框组件中实现允许用户自定义输入的功能，通过设置allow-create属性并结合filterable使用，轻松解决默认枚举数据无法满足需求的问题。
问题引入

在使用 element-ui 的下拉框组件时，遇到枚举的数据不能满足需求的情况，于是需要用户可以手动输入添加到列表中。

问题解决

element-ui 考虑到了这个需求，参考 element-ui el-select 组件文档：
https://element.eleme.cn/#/zh-CN/component/select
可知，添加 allow-create 属性，即可满足这个需求，前提是需要和 filterable 配合使用

总结

在遇到类似问题时，多看 API 文档，可以省很多时间

Vue3 - Element Plus 选择器 el-select 既可以选择下拉又可以手动输入文本功能，让 select 选择器同时拥有下拉选择和输入文本（支持手动输入文本和下拉选择）
🏆 前端领域优质创作者
12-02 1万+
vue3，elementplus，select选择器，el-select，el-select实现可下拉选择和手动输入，element-plus组件库中选择器怎么像输入框一样可以输入，既可以手输也可以选择，el-select可选择可以手动输入，Vue3使用el-select下拉框实现可输入可选择，el-select可新增输入可选择，vue3使用elementplus选择器Select既可以下拉选择也可以手动输入，实现el-select可选择/可输入，怎么能让输入框又能选择又能输入文本，既有下拉功能也有输入
可手动输入的select
05-25
NULL 博文链接：https://penghuaiyi.iteye.com/blog/418070
element ui —— el-select 添加可输入功能且失焦后自动录入
m0_67841039的博客
07-13 3299
el-select 添加可输入功能且失焦后自动录入
el-select实现可下拉选择和手动输入
C422805的博客
07-05 8255
--------------------------------------------------优化----------------------------------------------------------------------我们可以在elementUi官方文档中看到,已经帮我们写好了相应的属性,我们直接使用就可以啦~~~~但是我们写好之后发现没有达到最佳的效果,需要手动去选择或点击回车才能将我们手动输入的值填充到框中。注意搭配filterable使用哦~,不用遗漏了。
在el-table中 el-select实现可下拉选择和手动输入
qq_44716001的博客
09-08 1988
【代码】在el-table中 el-select实现可下拉选择和手动输入。
el-select 设置可搜索 怎么获取输入的值
最新发布
10-30
步骤1：设置el-select为可搜索和可输入（filterable），并绑定v-model（假设为selectValue）。 步骤2：添加一个@blur事件监听，在失焦时获取输入的值并更新selectValue。 步骤3：预设一个选项列表（options），...
elcascader设置为可手动输入
09-06
要将 el-cascader 设置为可手动输入，可以通过设置 prop 属性 `filterable` 为 `true` 来实现。这样用户就可以在输入框中手动输入选项了。示例代码如下： ``` <el-cascader v-model="value" :options="options" :...
el-select 可输入 如何实现 及其属性的用法
05-30
el-select可以设置为可输入，允许用户手动输入选项而不仅仅是选择下拉列表中的选项。要启用这个功能，需要设置`filterable`属性为`true`。此外，还可以设置`clearable`属性来允许用户清除输入内容。 以下是一个示例...
vue3+el-select 输入框时能够继续编辑
08-02
在模板中，设置`el-select`为可过滤和允许创建新条目，并绑定`visible-change`事件： ```vue <el-select v-model="selectedValue" filterable allow-create ref="selectRef" @visible-change=...
elementplus el-select聚焦的时候下拉框不关闭
07-11
常见的场景是：当el-select设置为可过滤（filterable）时，用户输入内容，下拉框会根据输入过滤选项，此时用户希望输入时下拉框保持展开。 在Element Plus中，el-select组件在以下情况会关闭下拉框： - 选中一个...
el-select下拉单选，可手动输入，选择下拉后支持修改
三七_z
12-16 530
【代码】el-select下拉单选，可手动输入，选择下拉后支持修改。
el-select可选择可以手动输入
热门推荐
weixin_46923775的博客
01-22 1万+
el-select可选可输入 今天接到这个需求，下拉框可选可输入，当时本来以为要用到事件e.target.value直接赋值，后面翻看element官方文档 发现人家早都考虑到这一点 给我们提供了属性allow-create即可达到可输入的效果 <el-select v-model="scope.row.channel_sku" filterable clearable
el-select可选择可搜索可输入新内容
请叫我欧皇！的博客
05-21 5747
需求：el-form-item添加el-select，并且el-select可选择可搜索可输入新内容，并且和其他的el-input做联动，如果是选择，那么el-input自动回填数据并且不可编辑，如果el-select输入新的内容，那么el-input也要输入新内容。实现功能。
el-select既能选择又能输入，并且再次点击时能接着编辑
weixin_43979556的博客
04-29 7488
1）el-select添加filterable和之后可以输入内容；2）再次输入时会将原来的内容变成提示，用户体验不好，因此需要找到办法将值重新赋给内部的input输入框，此处采用的方式将值重新赋给input输入框。3）使用之后可以确保按Enter键时能将内容输入，但是用户体验不好，因此使用方式将input输入框中的值实时赋值给绑定值select，用完记得在beforeDestroy()中移除监听。
关于el-select的可选择可输入方法
litiane的博客
11-06 4540
el-select中如果使用下拉选择会导致只能选择已有的项，无法自己输入，以下是解决办法： <el-select v-model="loginMsg.account" filterable remote reserve-keyword @change.native="selectBlur"
element el-select 手动输入进行选择
ingenuou_的博客
10-17 2124
element el-select 手动输入进行选择
el-select 可选择/可输入，自定义搜索方法
weixin_42255542的博客
11-01 5534
el-select 可选择/可输入，自定义搜索方法
Vue - Element 选择器 el-select 既可以选择下拉又可以手动输入文本功能（手动输入的值只能是数字 并且支持4位小数）
hangnan315的博客
10-21 1759
keyup.native 输入搜索内容实时触发（在此方法中对输入格式做限制）no-match-text 当输入的内容在下拉框中找不到时；逻辑部分（ el-select 实现 既可以输入内容又可以快速选择）@visible-change下拉框出现/隐藏时触发。filterable 下拉框开启快速搜索功能。@handFocus 触发输入框。@change 点击下拉选项。template部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值