elementUi可输入Select选择器

elementUi可输入Select选择器

需求：使用elementUi的Select选择器制作一个既可以保存手动输入内容，又可以保存下拉选项框中选中内容的选项框。
完整代码：

<template>
    <div class="show-input">
        <!-- clearable：是否可以清空选项(可选配置)-->
        <!-- filterable：是否可搜索（必要配置） -->
        <!-- allow-create：是否允许用户创建新条目，需配合 filterable 使用（必要配置）-->
        <el-select v-model="inputValue" @blur="selectBlur" 
        		   @change="selectChange" style="width: 100%" 
                   filterable clearable allow-create 
                   placeholder="请输入或选择数据" ref="selectInput">
            <el-option v-for="item in dataOptions" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
        </el-select>
    </div>
</template>
<script>
export default {
    data() {
        return {
            inputValue: '',//select绑定值
            //下拉选项数据
            dataOptions: [
                {
                    label: '选项1',
                    value: '1'
                }, {
                    label: '选项2',
                    value: '2'
                }, {
                    label: '选项3',
                    value: '3'
                },
            ]
        }
    },
    methods: {
        // 手动输入
        selectBlur(e) {
            if (e.target.value) {
                // 当下拉选择框中的值是手动输入的就将手动输入的值赋值给this.inputValue
                this.inputValue = e.target.value;
            }
        },
        // 下拉选中
        selectChange(val) {
            if (val) {
                // 当选项框中的值不是手动输入的就将选中的value赋值给this.inputValue
                this.inputValue = val
                // 如果后端同时需要value值就通过循环遍历取出value值
                let value = this.dataOptions.find((item) => item.label == val)?.value;
            }
        },
    }
};
</script>
<style lang='less' scoped>
.show-input {
    width: 100%;
}
</style>