Vue element 下拉框 可输入可选择(无bug)

背景: 需要一个可填可选的下拉框

当用户自定义输入时,自动添加“(其他)”后缀

效果如下:

<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>

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();   // 强制更新
  }
},

————————————————————————————————————————————