elmentui el-select下拉输入不清空已选值

本文介绍了解决 Element UI 中 el-select 组件在使用 filterable 属性时遇到的问题,包括如何自定义筛选方法以保留用户输入值,以及如何在获取焦点时保留输入框内的内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

下拉可创建条目,下拉框获取焦点输入时,已有值被清空

问题图: 

处理后图:

方法一:

1. 为了在匹配不到数据时也保留其输入的值,可以用 filter-method 自定义筛选

2. el-select添加上filterable之后,点击展开,点击收起,会导致focus和blur事件不触发,但点击页面其他地方才可正常触发 ,可利用visible-change 事件来解决些问题

3. input获取焦点时保留其value值用focus事件做相关赋值处理

具体实现代码如下:

<template>
   <el-select id="selectInput" v-model="value" filterable placeholder="请选择" ref="searchSelect" @visible-change="visibleChange" @focus="selectFocus" @change="selectChange">
     <el-option
       v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>
   </el-select>
 </template>
 
 <script>
   export default {
     data() {
       return {
         options: [{
           value: '选项1',
           label: '黄金糕'
         }, {
           value: '选项2',
           label: '双皮奶'
         }],
         optionsFilter: [{
           value: '选项1',
           label: '黄金糕'
         }, {
           value: '选项2',
           label: '双皮奶'
         }],
         value: ''
       }
     },
     methods: {
     selectFocus(e){
       let value = e.target.value;
        setTimeout(() => {
           let input = this.$refs.searchSelect.$children[0].$refs.input;
           input.value = value;
       })
     },
     visibleChange(val){
       if(!val){
         let input = this.$refs.searchSelect.$children[0].$refs.input;
         input.blur();
       }
      
     }
     }
   }
 </script>

方法二:

<template>
   <el-select id="selectInput" v-model="value" filterable placeholder="请选择" ref="searchSelect" @visible-change="visibleChange">
     <el-option
       v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>
   </el-select>
 </template>
 
 <script>
   export default {
     data() {
       return {
         options: [{
           value: '选项1',
           label: '黄金糕'
         }, {
           value: '选项2',
           label: '双皮奶'
         }],
         optionsFilter: [{
           value: '选项1',
           label: '黄金糕'
         }, {
           value: '选项2',
           label: '双皮奶'
         }],
         value: ''
       }
     },
     methods: {

// 根据值过滤label
            filterLabelByValue(value, compareKeyType, valueKeyType) {
                const self = this;
                const optionItems = self.field.options.optionItems;
                let model = '';

                if (self.field.options.groupable) {
                    optionItems.forEach((el) => {
                        el.children.forEach((item) => {
                            if (item[compareKeyType] == value) {
                                model = valueKeyType ? item[valueKeyType] : item[compareKeyType];
                            }
                        })
                    })
                } else {
                    optionItems.forEach((item) => {
                        if (item[compareKeyType] == value) {
                            model = valueKeyType ? item[valueKeyType] : item[compareKeyType];
                        }
                    })
                }
                return model ? model : value;
            },

     visibleChange(val){
       if(!val){
         let input = this.$refs.searchSelect.$children[0].$refs.input;
         input.blur();
       }
      
     }
     },

mounted() {
            const self = this;
            if (this.field.options.allowCreate) {
                const input = this.$refs.fieldEditor.$el.getElementsByTagName('input')[0];
                const optionItems = self.field.options.optionItems;

                // 监听输入事件
                input.oninput = (e) => {
                    const value = e.target.value;
                    if (optionItems && optionItems.length) {
                        self.fieldModel = self.filterLabelByValue(value, self.labelKey);
                    } else {
                        self.fieldModel = value;
                    }
                    self.syncUpdateFormModel(self.fieldModel);
                }

                // 监听获取焦点
                input.onfocus = (e) => {
                    setTimeout(() => {
                        if (optionItems && optionItems.length) {
                            e.target.value = self.filterLabelByValue(this.fieldModel, self.valueKey, self
                                .labelKey);
                        } else {
                            e.target.value = this.fieldModel;
                        }
                    });
                }
            }
        },

   }
 </script>

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值