当前位置:   article > 正文

解决:el-select可输入时失焦会失去输入框中值_el-select不选择option不失去焦点

el-select不选择option不失去焦点

思路

  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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  methods: {
    dataFilter(val, key) {
      this.form[key] = val;
    },
  • 1
  • 2
  • 3
  • 4
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/木道寻08/article/detail/890811
推荐阅读
相关标签
  

闽ICP备14008679号