要素選択はドロップダウン ボックスから選択して入力できます (Enter をクリックする必要はなく、追加の操作は必要ありません)。

ドキュメントを見ると、このプロパティを true に設定でき、ドロップダウン ボックスに自分で入力できることがわかります。
ここに画像の説明を挿入

<el-select
     v-model="form.pcode"
     clearable
     filterable
     placeholder="请选择产品"
     class="product-input"
     allow-create
 >
     <el-option
         v-for="(item,index) in arr_product"
         :key="index"
         :label="item.label"
         :value="item.value"
     />
 </el-select>

本来、上記の2つの属性は満たされていますが、実際の操作では、以下のように内容を入力した後、クリックまたはEnterキーを押して確認しないと、入力内容が消えてしまいます(Enterキーを押すか、ドロップボックスの1223をクリックします)。ダウンボックス、入力ボックスが決定され、非常に不便です):
ここに画像の説明を挿入
そこで、この問題を解決するために、ぼかしメソッドを使用します。

<el-select
   v-model="form.pcode"
   clearable
   filterable
   placeholder="请选择产品"
   class="product-input"
   @blur="productSelect"
   allow-create
>
   <el-option
       v-for="(item,index) in arr_product"
       :key="index"
       :label="item.label"
       :value="item.value"
   />
</el-select>




productSelect(e) {
    
    
     let value = e.target.value; // 输入框值
      if(value) {
    
     // 你输入才有这个值 不为空,如果你下拉框选择的话 这个值为空
          this.form.pcode = value
      }
  }

@blur メソッドを使用してフォーカスを失い、キャリッジ リターンやクリックを追加せずに値を入力します。

おすすめ

転載: blog.csdn.net/yuanqi3131/article/details/122102029