使用Element-Ui-Plus時，對select-v2進行自定義操作，可以自定義添加篩選後無資料的選項進行添加。

問題背景：

在最近的開發需求中，需要對element-ui-plus的select-v2的元件進行自定義的改裝，即在搜尋狀态完成後，

如果發現無搜尋内容，可進行自定義的進行添加目前的select的input框内。

問題原因：

select-v2提供了一個屬性方法，即allow-create的屬性， 為了使 allow-create 正常工作，

filterable 的值必須為 true。但是我們發現，使用這個屬性後，如果輸入的是已經存在的

值，它也會預設進行建立，這不是我們想要的效果。如圖所示；

通過調查研究發現，可以使用如下的方法進行解決。

解決思路：

使用自定義的空狀态的插槽，設定一個添加按鈕，監聽該按鈕，當發現無搜尋資料時，點選添加按鈕，就把

目前的input的值替換為搜尋框輸入的值。

代碼片段：

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;  //關閉下拉框
}
           

實作效果：