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

声明：原文转载链接出自：Vue element 下拉框 可输入可选择(无bug)_vue下拉框可以输入数据-CSDN博客 

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

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

效果如下:

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

第二种简单方式实现下拉框可输可选:

直接使用default-first-option 属性配合allow-create + filterable即可 ：输入后自动创建第一个匹配项，选择后为当前下拉框的值

  <el-select 
  	v-model="queryParams.network" 
  	clearable 
  	filterable 
  	allow-create 
  	default-first-option 
  	@blur="selectBlur($event)"
 >
    <el-option
        v-for="(item,index) in list"
        :key="index"
        :label="item"
        :value="item">
    </el-option>
  </el-select>

data() {
	return {
		queryParams: {},
		optionList: ['172.11.154.1', '172.11.188.2', '172.13.122.8', '', '172.15.154.22']
	}
},
method() {
	// 下拉框可输可选
	selectBlur(e) {
	  if (e.target.value !== '') {
	    this.$set(this.queryParams, 'network', e.target.value);
	  }
	},
}