element plus 当el-select开启了allow-create回车创建之后再回车,创建的条目消失
时间: 2024-11-15 07:23:35 浏览: 0
el-select-tree:ElementUI的el-select与el-tree结合
5星 · 资源好评率100%
Element Plus是一个基于Vue.js的开源UI组件库,它对Element UI进行了现代化和增强。关于`el-select`组件的`allow-create`属性,当你设置这个属性允许用户自定义输入并通过回车键添加新的选项时,用户的输入会被当作一个新的选择项。
然而,你提到的问题可能是当用户连续两次快速按下回车键时,新创建的条目会暂时显示然后消失。这可能是因为`el-select`默认的行为是在每次按键后立即触发事件处理,如果处理过程中没有显式地保留新添加的值,第二次回车时新条目可能因为还未真正保存就被清除掉了。
解决这个问题的一种常见做法是在`input`元素的`keyup`事件处理器中,添加一个临时存储新值的步骤,并在所有操作完成后再提交到数据模型中。例如:
```javascript
<template>
<el-select v-model="selectedOption" :create="allowCreate">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
allowCreate: true,
newOption: '', // 添加临时变量来储存新输入
options: [], // 你的选项列表
};
},
methods: {
handleInput(e) {
this.newOption = e.target.value;
if (e.key === 'Enter') {
// 防止多次回车删除新选项
e.preventDefault();
this.addNewOption();
}
},
addNewOption() {
if (this.newOption.trim()) { // 检查是否为空
this.options.push({ value: this.newOption, label: this.newOption });
this.selectedOption = '';
this.newOption = ''; // 清空新输入
}
},
},
watch: {
selectedOption(newVal, oldVal) {
// 可能需要在这里做其他清理工作,比如从本地数据库同步等
},
},
mounted() {
// 如果有自动加载数据的需求,可以放在这里
},
};
</script>
```
阅读全文