背景: 需要一个可填可选的下拉框
当用户自定义输入时,自动添加“(其他)”后缀
效果如下:
<el-select v-model="value"placeholder="请选择"clearablefilterable@blur="selectBlur"@clear="selectClear"@change="selectChange"><el-optionv-for="(item,index) in options":key="index":label="item.label":value="item.value" /></el-select>
data() {return {value: '',options: [{value: '无保留意见', label: '无保留意见'},{value: '保留意见', label: '保留意见' }],}}
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();},}
注: 使用Vue开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值；
赋值完以后，执行下面这个方法 强制刷新数据
this.$forceUpdate();
补充：
————————————————————————————————————————————
1、经测试：上述 @change可以拿掉，不影响功能。
————————————————————————————————————————————
2、若表单中有多个字段需要用到相同的方法，则可以统一，使用回调函数的方式赋值。
// 字段 name, prop=name@blur="(e) => selectBlur(e, 'name')"// 字段 age, prop=age@blur="(e) => selectBlur(e, 'age')"
selectBlur(e, prop) {if (e.target.value !== '') {this[prop] = e.target.value + '(其他)';this.$forceUpdate(); // 强制更新}},
————————————————————————————————————————————
