解决：el-select可输入时失焦会失去输入框中值

偏执的太偏执、 2024-03-22 09:31 42阅读 0赞

#### 思路 ####

1.  filterable属性，是否可搜索，为true后select组件可以输入值了
2.  el-select组件输入值是不会更改v-model的值的，而是选择选项后才更改，所以我们可以在输入触发的方法中手动更改v-model绑定的值，这个方法就是filter-method
3.  filter-method方法，在输入框输入值的时候会触发，就相当于el-input组件的input方法，这时修改v-model绑定值，即可实现失焦输入框中值不会失去，同时添加自定义参数，便于多个select组件情况下更方便地更改对应v-model绑定的值

allow-create，是否允许用户创建新条目，需配合 filterable 使用  
default-first-option，在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用

<el-select
                  v-model="form.hello"
                  placeholder="请选择"
                  filterable
                  allow-create
                  clearable
                  default-first-option
                  :filter-method="(value) => dataFilter(value, 'hello')">
                  <el-option
                    v-for="item in options"
                    :key="item.val"
                    :label="item.name"
                    :value="item.val"></el-option>
                </el-select>

methods: {
        
        dataFilter(val, key) {
        
          this.form[key] = val;
        },

发表评论取消回复

表情：

评论列表（有 0 条评论，42人围观）

还没有评论，来说两句吧...

相关阅读

相关怎么解决输入框失去焦点以后光标跑到输入框外面去的问题

在 HTML 中，可以通过在输入框失去焦点后设置光标的位置来解决这个问题。可以使用 JavaScript 来控制光标的位置。具体实现方式如下: 1. 在输入框的 "onbl

ゝ一纸荒年。/ 2024年03月25日 14:45/ 0 赞/ 15 阅读

相关解决：el-select可输入时失焦会失去输入框中值

思路 1. filterable属性，是否可搜索，为true后select组件可以输入值了 2. el-select组件输入值是不会更改v-model的值的，而是选择

偏执的太偏执、/ 2024年03月22日 09:31/ 0 赞/ 43 阅读

相关可下拉可输入的输入框实现方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2023年01月08日 02:10/ 0 赞/ 318 阅读

相关实时监听input输入框中的内容以及失去焦点的时候再去获取输入框中的值

1、实时监听input的输入值伴随着输入框中内容变化，实时打印输入框中绑定变量的值 <input (keyup)="onChange()" [(ngModel)]

深碍√TFBOYSˉ_/ 2022年12月23日 09:51/ 0 赞/ 175 阅读

相关 Antd输入框失去焦点后请求接口根据返回值校验

标题可能描述的不是很清楚，意思是：我的输入框在失去焦点的时候，既要校验非空和特殊字符，还要请求接口根据返回值校验是否通过： ![在这里插入图片描述][20210302174

小灰灰/ 2022年11月04日 13:23/ 0 赞/ 109 阅读

相关 input输入框输入数值检测只能输入数字，非数字离开输入框后会清除

input输入框输入数值检测只能输入数字，非数字离开输入框后会清除 // blur 事件 Blur(nums) { thi

爱被打了一巴掌/ 2022年09月10日 10:10/ 0 赞/ 300 阅读

相关 js校验输入框还可输入的字数

function checkLength(input) \{ // 获取可输入最大长度为140个汉字，一个汉字两个字符 var maxLength = 280;

超、凢脫俗/ 2022年08月06日 13:03/ 0 赞/ 216 阅读

相关 textraex 失焦

效果图： ![SouthEast][] ![SouthEast 1][] ![SouthEast 2][] 具体实现： 1、textarea标签内容 \[ht

淩亂°似流年/ 2022年06月04日 09:55/ 0 赞/ 228 阅读

相关解决secureCRT输入框输入不正常

今天遇到secureCRT中输入字符出现如下图所示现象： ![字符宽度不正常][SouthEast] 字符宽度不正常导致，输入命令无效。无意中按到如下快捷键得以解

青旅半醒/ 2022年06月04日 04:24/ 0 赞/ 1004 阅读

相关失焦事件

// 添加事件 var addEvent = function() \{ $(doc

雨点打透心脏的1/2处/ 2022年05月16日 00:50/ 0 赞/ 198 阅读