前言
最近開發(fā)項(xiàng)目使用element-plus庫(kù)內(nèi)的select組件，其中有提供一個(gè)創(chuàng)建新的選項(xiàng)的用法，但是發(fā)現(xiàn)一些小問題，在此記錄
版本
“element-plus”: “^2.3.9”,
“vue”: “^3.3.4”,
問題
1、在options數(shù)據(jù)源中無(wú)數(shù)據(jù)的時(shí)候，在輸入框中輸入要?jiǎng)?chuàng)建的選項(xiàng)，ele會(huì)自動(dòng)幫我們選中第一條，然后回車后會(huì)自動(dòng)給綁定值中push進(jìn)一條數(shù)據(jù)進(jìn)去
2、但是options數(shù)據(jù)源中有數(shù)據(jù)的時(shí)候，若輸入框中的值可以匹配上數(shù)據(jù)源的話回車后會(huì)自動(dòng)選中，但是再無(wú)數(shù)據(jù)的時(shí)候需要回車后創(chuàng)建數(shù)據(jù)卻無(wú)法選中
解決辦法
有數(shù)據(jù)源的情況下直接監(jiān)聽回車事件，再敲擊回車后后獲取到輸入框中的值手動(dòng)將值添加進(jìn)去文章來源：http://www.zghlxwxcb.cn/news/detail-672182.html
代碼如下
<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實(shí)例
const selectRef = ref(null)
// 監(jiān)聽select回車事件
const selectCreate = function() {
// 當(dāng)options數(shù)據(jù)源中無(wú)值的話，回車后elementplus是可以正常新增的，無(wú)需手動(dòng)添加
if (options.value.length === 0) return
// 通過select實(shí)例獲取到內(nèi)部input節(jié)點(diǎn)
const inputDom = selectRef.value.input
// 通過input節(jié)點(diǎn)獲取到輸入值
const domValue = inputDom.value
// 過濾掉空的數(shù)據(jù)
if (!domValue) return
// 將輸入值手動(dòng)push進(jìn)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="回車后創(chuàng)建" @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>
拓展
既然是創(chuàng)建新選項(xiàng)，但是在創(chuàng)建完成后數(shù)據(jù)源中卻沒有新增出來一條，不知道你們是否跟我有同樣的疑問，可能是因?yàn)樾聞?chuàng)建出來的選項(xiàng)并非屬于原有數(shù)據(jù)源所以ele開發(fā)人員才并未提供可以直接加入到數(shù)據(jù)源中的api吧
既然我們都可以通過獲取實(shí)例的方式獲取到input中當(dāng)前輸入的值了，那么直接改造一下，手動(dòng)加進(jìn)去不就行了嗎
代碼如下文章來源地址http://www.zghlxwxcb.cn/news/detail-672182.html
<script setup>
import { ref } from 'vue'
const options = ref([])
// 拓展，既然可以獲取到數(shù)據(jù)框中的值了，那么在回車創(chuàng)建完選項(xiàng)后，順帶在數(shù)據(jù)源中也新增一條數(shù)據(jù)也是可以的，畢竟這樣才更加符合創(chuàng)建了一個(gè)新的選項(xiàng)
const selectValue = ref([])
// 獲取select實(shí)例
const selectRef = ref(null)
// 監(jiān)聽select回車事件
const selectCreate = function() {
// 當(dāng)options數(shù)據(jù)源中無(wú)值的話，回車后elementplus是可以正常新增的，無(wú)需手動(dòng)添加，且監(jiān)聽到回車后input值也是空的
if (options.value.length === 0) return
// 通過select實(shí)例獲取到內(nèi)部input節(jié)點(diǎn)
const inputDom = selectRef.value.input
// 通過input節(jié)點(diǎn)獲取到輸入值
const domValue = inputDom.value
// 過濾掉空的數(shù)據(jù)
if (!domValue) return
// 將輸入值手動(dòng)push進(jìn)selectValue中
selectValue.value.push(domValue)
// 手動(dòng)在數(shù)據(jù)源中也新增一條進(jìn)去
options.value.push({
value: selectRef.value.input.value,
label: selectRef.value.input.value
});
// 最后將input中的值清空即可
selectRef.value.input = ''
}
// 選項(xiàng)被選中后回調(diào)
const selectChange = function(seleItem) {
const data = seleItem[seleItem.length - 1]
if (!data) return
// 判斷數(shù)據(jù)源中沒有的話，手動(dòng)加入
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="回車后創(chuàng)建" @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>
到了這里，關(guān)于解決element的select組件創(chuàng)建新的選項(xiàng)可多選且opitions數(shù)據(jù)源中有數(shù)據(jù)的情況下，回車不能自動(dòng)選中創(chuàng)建的問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
