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

前言

最近开发项目使用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>