Vue使用el-select下拉框实现可输入可选择，失去焦点时不清空绑定参数_el-select 可以输入也可以选择

<template>
  <div>
  <!-- 例子1、嵌套循环的方式  -->
    <div v-for="item in list" :key="item.id">
      <el-select
      	clearable
      	filterable
 		allow-create
      	v-model="name"
        @input="Update"
        default-first-option
        @blur.capture.native="Nameblur(item.id, $event)"
      >
        <el-option
          :value="item.id"
          :label="item.label"
          v-for="item in options"
          :key="item.id"
        >
        </el-option>
      </el-select>
    </div>

<!-- 例子2、也可单独设置filterable属性必须加  -->
 	<el-select
 		filterable
 		allow-create
 		ref="nameSel"
      	v-model="name"
      	value-key="name"
      	@blur="nameBlur"
      	default-first-option
    >
    	<el-option
        	v-for="item in list"
         	:key="item"
         	:label="item"
         	:value="item"
         />
     </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      list: [
        {
          id: 0,
          title: "张三",
          name: "",
        },
        {
          id: 1,
          title: "李四",
          name: "",
        },
        {
          id: 2,
          title: "老六",
          name: "",
        },
      ],
    };
  },
  methods: {
    Nameblur(id, e) {
      this.list.forEach((item, index) => {
      // 不加这句 e.target.value 判断还会多输出一次空白的
        if (id == index && e.target.value) {
          console.log(item, "__________", e.target.value);
          item.name = e.target.value;//此处赋值不强制更新参数有可能无法显示
          this.$forceUpdate();//强制更新
        }
      });
    },
    //可通过ref属性获取当前select选择器中的输入内容
	nameBlur(){
	 this.name = this.$refs.nameSel.selectedLabel
	},
    Update() {
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90