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

解决element的select组件创建新的选项可多选且opitions数据源中有数据的情况下，回车不能自动选中创建的问题

news 2025/9/12 17:00:01

前言

最近开发项目使用element-plus库内的select组件，其中有提供一个创建新的选项的用法，但是发现一些小问题，在此记录

版本

“element-plus”: “^2.3.9”,
“vue”: “^3.3.4”,

问题

1、在options数据源中无数据的时候，在输入框中输入要创建的选项，ele会自动帮我们选中第一条，然后回车后会自动给绑定值中push进一条数据进去
2、但是options数据源中有数据的时候，若输入框中的值可以匹配上数据源的话回车后会自动选中，但是再无数据的时候需要回车后创建数据却无法选中

解决办法

有数据源的情况下直接监听回车事件，再敲击回车后后获取到输入框中的值手动将值添加进去

代码如下

<script setup>
import { ref } from 'vue'
const options = ref([{value: 'HTML',label: 'HTML',},{value: 'CSS',label: 'CSS',},{value: 'JavaScript',label: 'JavaScript',},
])
const selectValue = ref([])
// 获取select实例
const selectRef = ref(null)
// 监听select回车事件
const selectCreate = function() {// 当options数据源中无值的话，回车后elementplus是可以正常新增的，无需手动添加if (options.value.length === 0) return// 通过select实例获取到内部input节点const inputDom = selectRef.value.input// 通过input节点获取到输入值const domValue = inputDom.value// 过滤掉空的数据if (!domValue) return// 将输入值手动push进selectValue中selectValue.value.push(domValue)// 最后将input中的值清空即可selectRef.value.input = ''
}</script><template><el-select ref="selectRef" v-model="selectValue" multiple filterable allow-create default-first-option :reserve-keyword="false" placeholder="回车后创建" @keyup.enter.native="selectCreate"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/></el-select>
</template><style scoped>
</style>

拓展

既然是创建新选项，但是在创建完成后数据源中却没有新增出来一条，不知道你们是否跟我有同样的疑问，可能是因为新创建出来的选项并非属于原有数据源所以ele开发人员才并未提供可以直接加入到数据源中的api吧
既然我们都可以通过获取实例的方式获取到input中当前输入的值了，那么直接改造一下，手动加进去不就行了吗
代码如下

<script setup>
import { ref } from 'vue'const options = ref([])
// 拓展，既然可以获取到数据框中的值了，那么在回车创建完选项后，顺带在数据源中也新增一条数据也是可以的，毕竟这样才更加符合创建了一个新的选项
const selectValue = ref([])
// 获取select实例
const selectRef = ref(null)
// 监听select回车事件
const selectCreate = function() {// 当options数据源中无值的话，回车后elementplus是可以正常新增的，无需手动添加，且监听到回车后input值也是空的if (options.value.length === 0) return// 通过select实例获取到内部input节点const inputDom = selectRef.value.input// 通过input节点获取到输入值const domValue = inputDom.value// 过滤掉空的数据if (!domValue) return// 将输入值手动push进selectValue中selectValue.value.push(domValue)// 手动在数据源中也新增一条进去options.value.push({value: selectRef.value.input.value,label: selectRef.value.input.value});// 最后将input中的值清空即可selectRef.value.input = ''
}
// 选项被选中后回调
const selectChange = function(seleItem) {const data = seleItem[seleItem.length - 1]if (!data) return// 判断数据源中没有的话，手动加入if (options.value.every(item => item.value !== data)) {options.value.push({value: data,label: data});}
}</script><template><el-select ref="selectRef" v-model="selectValue" multiple filterable allow-create default-first-option :reserve-keyword="false" placeholder="回车后创建" @keyup.enter.native="selectCreate" @change="selectChange"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/></el-select>
</template><style scoped>
</style>