Vue element 下拉框 可输入可选择(无bug)
https://blog.csdn.net/sunshineTing2/article/details/108978675
背景: 需要一个可填可选的下拉框
当用户自定义输入时,自动添加“(其他)”后缀
效果如下:
<el-select
v-model="value"
placeholder="请选择"
clearable
filterable
@blur="selectBlur"
@clear="selectClear"
@change="selectChange"
>
<el-option
v-for="(item,index) in options"
:key="index"
:label="item.label"
:value="item.value" />
</el-select>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
data() {
return {
value: '',
options: [
{
value: '无保留意见',
label: '无保留意见'
}, {
value: '保留意见',
label: '保留意见'
}
],
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
methods: {
selectBlur(e) {
// 意见类型
if (e.target.value !== '') {
this.value = e.target.value + '(其他)';
this.$forceUpdate() // 强制更新
}
},
selectClear() {
this.value = ''
this.$forceUpdate()
},
selectChange(val) {
this.value = val
this.$forceUpdate()
},
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
注: 使用Vue开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值;
赋值完以后,执行下面这个方法 强制刷新数据
this.$forceUpdate()
- 1