When using Element-Ui-Plus, perform a custom operation on select-v2, and you can customize the option of adding no data after filtering.

Problem background:

In the recent development requirements, it is necessary to customize the component of select-v2 of element-ui-plus, that is, after the search state is completed, if there is no search content, it can be customized to add the current
select input box.

problem causes:

select-v2 provides an attribute method, that is, the attribute of allow-create. In order for allow-create to work properly,
the value of filterable must be true. But we found that after using this property, if the input is an existing
value, it will also be created by default, which is not the effect we want. As shown in the figure;

through investigation and research, it is found that the following methods can be used to solve the problem.

Solutions:

Use a custom slot with an empty state, set an add button, listen to the button, and when no search data is found, click the add button to replace the
current input value with the value entered in the search box.

code segment:

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;  //关闭下拉框
}

Realize the effect: