当前位置：首页 > news >正文

element里的select自定义输入的时候，不用点击下拉框选中自定义输入，而是当焦点失去的时候自动赋值输入的内容

news 2025/9/23 12:50:48

在Element UI的el-select中，可以通过自定义失焦事件处理来实现当焦点离开时自动将输入内容赋值给选择框。

实现思路

使用el-select的filterable和allow-create属性允许自定义输入
添加自定义输入框（如el-input）用于接收用户输入
监听输入框的blur事件，在失焦时将输入内容添加到选择框

代码实现

<el-selectv-model="queryParams.receiverName"placeholder="请选择收货人"clearablefilterableallow-create@blur="receiverBlur"
><el-option v-for="(item,index) in contactInformation" :key="index" :label="item.receiverName" :value="item.id" />
</el-select>
const receiverBlur = (event) => {if(!event.target.value){return}if((!queryParams.value.receiverName && event.target.value) || (queryParams.value.receiverName != event.target.value)){queryParams.value.receiverName = event.target.value}
}

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>el-select失焦自动赋值</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>body {font-family: 'Helvetica Neue', Arial, sans-serif;padding: 20px;background-color: #f5f7fa;}.container {max-width: 600px;margin: 0 auto;background: white;padding: 25px;border-radius: 8px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}.demo-title {text-align: center;margin-bottom: 25px;color: #409EFF;font-weight: 500;}.select-container {margin-bottom: 20px;}.custom-input {margin-top: 15px;}.tip {font-size: 13px;color: #909399;margin-top: 8px;}</style>
</head>
<body><div id="app" class="container"><h2 class="demo-title">el-select失焦自动赋值示例</h2><div class="select-container"><el-select v-model="selectedValue" filterable allow-create placeholder="请选择或输入内容"style="width: 100%"@blur="handleBlur"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><p class="tip">直接在输入框输入后，失去焦点即可自动添加</p></div><div class="custom-input"><el-inputv-model="customInput"placeholder="或在此输入后失焦自动添加到选择框"@blur="addCustomOption"style="width: 100%"><template slot="append"><el-button icon="el-icon-plus" @click="addCustomOption"></el-button></template></el-input></div><div style="margin-top: 25px;"><p>当前选中值: <strong>{{ selectedValue }}</strong></p><p>选项列表: {{ options.map(o => o.label) }}</p></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {selectedValue: '',customInput: '',options: [{ value: 'option1', label: '选项1' },{ value: 'option2', label: '选项2' },{ value: 'option3', label: '选项3' },{ value: 'option4', label: '选项4' },{ value: 'option5', label: '选项5' }]};},methods: {// 处理el-select的失焦事件handleBlur(event) {const inputValue = event.target.value;if (inputValue && !this.options.some(opt => opt.label === inputValue)) {this.addNewOption(inputValue);}},// 添加自定义输入选项addCustomOption() {if (this.customInput && !this.options.some(opt => opt.label === this.customInput)) {this.addNewOption(this.customInput);this.customInput = '';}},// 添加新选项addNewOption(label) {const newOption = {value: 'custom_' + Date.now(),label: label};this.options.push(newOption);this.selectedValue = newOption.value;this.$message({message: `已添加选项: ${label}`,type: 'success',duration: 2000});}}});</script>
</body>
</html>