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

Posted 2023-03-02 龖龖龖

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