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

小虫信息科技

已于 2022-09-02 18:00:24 修改

阅读量5.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue2.0 文章标签： servlet elementui 前端

于 2022-08-27 18:04:33 首次发布

本文链接：https://blog.csdn.net/lml_little/article/details/126560778

vue2.0 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了解决 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>