el-select别的input添值自动清空
时间: 2023-08-17 12:09:08 浏览: 88
您好!对于el-select组件,如果要实现在选择其他选项时自动清空输入框的值,可以通过监听select的change事件,在change事件中将输入框的值置为空。以下是一个示例代码:
```html
<template>
<div>
<el-select v-model="selectedOption" @change="handleSelectChange">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
<el-input v-model="inputValue"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
inputValue: ''
};
},
methods: {
handleSelectChange() {
this.inputValue = ''; // 清空输入框的值
}
},
computed: {
options() {
// 选项列表
return [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
];
}
}
};
</script>
```
在上面的代码中,我们使用了el-select组件和el-input组件。当选择el-select中的某个选项时,会触发change事件,然后调用handleSelectChange方法来清空输入框的值(即将inputValue置为空)。这样就可以实现在选择其他选项时自动清空输入框的值。
希望对您有所帮助!如有任何疑问,请随时向我提问。