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>