Element-Ui-Plus を使用する場合、select-v2 でカスタム操作を実行すると、フィルタリング後にデータを追加しないオプションをカスタマイズできます。

問題の背景:

最近の開発要件では、element-ui-plus の select-v2 のコンポーネントをカスタマイズする必要があります。つまり、検索状態が完了した後、検索コンテンツがない場合は、現在の選択を追加するようにカスタマイズできます
。入力ボックス。

問題の原因:

select-v2 は属性メソッド、つまり allow-create の属性を提供します. allow-create が正しく機能するためには、
filterable の値が true でなければなりません. しかし、このプロパティを使用した後、入力が既存の
値である場合、それもデフォルトで作成されることがわかりました。これは、私たちが望む効果ではありません。図に示すように、
ここに画像の説明を挿入
調査研究の結果、以下の方法で問題を解決できることが判明しました。

ソリューション:

空の状態でカスタムスロットを使用し、追加ボタンを設定してボタンをリッスンし、検索データが見つからない場合は追加ボタンをクリックして、現在の入力値を検索ボックスに入力された値に置き換えます
。

コードセグメント:

html:

                <el-select-v2 ref="selectAppType" >
                    <template #empty>
                        <div :class="[app.e('select-add')]">
                            <span>
                                无搜索结果
                            </span>
                            <el-button @click="selectValAdd" type="primary">
                                添加
                            </el-button>
                        </div>
                    </template>
                </el-select-v2>

js:

import {
    
     ref, reactive, toRefs, onMounted } from "vue";
const selectAppType = ref();
//增加自定义下拉框的值
const selectValAdd = () => {
    
    
    let eleInput = document.getElementsByClassName("el-select-v2__input-calculator")[0];
    let inputVal = eleInput.innerHTML; //通过绑定dom对象获取所需要的input的值
    console.log(inputVal)  //输出获取的input的值，该步可以对所需的赋值的对象进行赋值
    selectAppType.value.expanded = false;  //关闭下拉框
}

効果を実感:

ここに画像の説明を挿入