element ui Select filterable 可搜索 鼠标离开输入框时,数据不会丢失 实现
时间: 2024-03-11 09:47:44 浏览: 21
实现这个功能可以通过监听Select组件中输入框的blur事件,在事件处理函数中将输入框的value值保存到组件的内部状态中。具体的实现代码如下:
```
<el-select v-model="value" filterable @blur="handleBlur">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<script>
export default {
data() {
return {
value: '',
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' },
],
inputValue: '', // 保存输入框的值
}
},
methods: {
handleBlur() {
this.inputValue = this.$refs.selectInput.currentValue;
}
},
computed: {
// 定义一个计算属性,用于在下次输入时将保存的值还原到输入框中
currentInputValue() {
return this.inputValue;
}
}
}
</script>
```
在上面的代码中,我们通过在Select组件的输入框上添加一个`ref`属性,来获取输入框的当前值。然后在`handleBlur`方法中,将当前值保存到`inputValue`变量中。最后,通过定义一个计算属性`currentInputValue`,在下次输入时将保存的值还原到输入框中。这样就实现了在搜索过程中,鼠标离开输入框时,数据不会丢失的功能。