如何將el-select和el-input結(jié)合

因?yàn)椴皇煜s中的API受了一個(gè)下午的苦，最后還是AI提醒我怎么寫的 謝謝git copilot????????

先粘貼一邊代碼，這塊代碼主要時(shí)針對(duì)數(shù)組中只有一個(gè)值的，而在很多時(shí)候我們select中的數(shù)值不止一個(gè)

首先我們先看看數(shù)組中只有一個(gè)類型的值我們?cè)撊绾芜M(jìn)行調(diào)用,我在原博主的代碼上進(jìn)行了一些修改，大家可以到原博主那邊看看

這段代碼的原博主地址https://blog.csdn.net/wangchaohpu/article/details/106021791

這段代碼是通過(guò)遍歷數(shù)組進(jìn)行取值的，我們通過(guò)console.log來(lái)看看這段代碼打出的什么值

可以很清晰的看到一個(gè)是dropDownValue的值，也就是我們輸入的值，另外一個(gè)則是判斷的值，通過(guò)item歷便整個(gè)數(shù)組進(jìn)行查找，是否有值和我們輸入的dropDownValue匹配，記住includes是模糊匹配菜鳥教程中的解釋當(dāng)然假如不熟悉也可以看看filter是干什么的菜鳥教程中的filter簡(jiǎn)單來(lái)說(shuō)filter() 方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素。所以可以解釋為什么是循環(huán)整個(gè)數(shù)組了。

<template>
?<div class="common-wrapper">
? ?<el-select v-model="valueMeta" collapse-tags placeholder="請(qǐng)選擇標(biāo)簽">
? ? ?<el-input type="text" placeholder="請(qǐng)輸入" class="el-input__inner" v-model="dropDownValue" @keydown.enter.native="dropDownSearch"></el-input>
? ? ?<el-option v-for="item in optionsMetaShow" :value="item"></el-option>
? ?</el-select>
?</div>
</template>
<script>
export default {
?data() {
? ?return {
? ? ?dropDownValue: '',
? ? ?optionsMetaAll: ['華成云平臺(tái)', '鄭州中心', '深圳中心', '上海中心', '北京中心'],
? ? ?optionsMetaShow: ['華成云平臺(tái)', '鄭州中心', '深圳中心', '上海中心', '北京中心'],
? ? ?valueMeta: []
? ?}
?},
?methods: {
? ?dropDownSearch() {
? ? ?let _this = this
? ? ?_this.valueMeta = []
? ? ?_this.optionsMetaShow = _this.optionsMetaAll.filter(_this.filterSearch)
? ? ?console.log(_this.optionsMetaShow)
? ?},
? ?filterSearch(item) {
? ? ?//dropDownValue是輸入框的值
? ? ?console.log( this.dropDownValue)
? ? ?console.log(item.includes(this.dropDownValue))
? ? ?return item.includes(this.dropDownValue)
? ?}
?}
}
</script>
<style>
.el-scrollbar {
?display: block !important;
}
</style>

好當(dāng)你知道了怎么循環(huán)一個(gè)數(shù)組只有一個(gè)值時(shí)的情況，接下來(lái)我們來(lái)看看怎么查詢數(shù)組中含有Object的情況，這個(gè)情境非常的常見，我也被困在這一個(gè)下午，我們先來(lái)看看代碼，當(dāng)然你也可以寫一遍，如果出現(xiàn)了一些問(wèn)題，可以參照我接下來(lái)的代碼

<template>
?<div class="common-wrapper">
? ?<el-select v-model="valueMeta" collapse-tags placeholder="請(qǐng)選擇標(biāo)簽">
? ? ?<el-input type="text" placeholder="請(qǐng)輸入" class="el-input__inner" v-model="dropDownValue" @keydown.enter.native="dropDownSearch"></el-input>
? ? ?<el-option v-for="item in optionsMetaShow" :value="item.value" :label="item.label"></el-option>
? ?</el-select>
?</div>
</template>
<script>
export default {
?data() {
? ?return {
? ? ?dropDownValue: '',
? ? ?optionsMetaAll: [
? ? ? ?{
? ? ? ? ?value: 1,
? ? ? ? ?label: '華成云平臺(tái)'
? ? ? ?},
? ? ? ?{
? ? ? ? ?value: 2,
? ? ? ? ?label: '鄭州中心'
? ? ? ?},
? ? ? ?{
? ? ? ? ?value: 3,
? ? ? ? ?label: '深圳中心'
? ? ? ?},
? ? ? ?{
? ? ? ? ?value: 4,
? ? ? ? ?label: '上海中心'
? ? ? ?},
? ? ? ?{
? ? ? ? ?value: 5,
? ? ? ? ?label: '北京中心'
? ? ? ?}
? ? ?],
? ? ?optionsMetaShow: [
? ? ? ?{
? ? ? ? ?value: 1,
? ? ? ? ?label: '華成云平臺(tái)'
? ? ? ?},
? ? ? ?{
? ? ? ? ?value: 2,
? ? ? ? ?label: '鄭州中心'
? ? ? ?},
? ? ? ?{
? ? ? ? ?value: 3,
? ? ? ? ?label: '深圳中心'
? ? ? ?},
? ? ? ?{
? ? ? ? ?value: 4,
? ? ? ? ?label: '上海中心'
? ? ? ?},
? ? ? ?{
? ? ? ? ?value: 5,
? ? ? ? ?label: '北京中心'
? ? ? ?}
? ? ?],
? ? ?valueMeta: []
? ?}
?},
?methods: {
? ?dropDownSearch() {
? ? ?let _this = this
? ? ?_this.valueMeta = []
? ? ?_this.optionsMetaShow = _this.optionsMetaAll.filter(_this.filterSearch)
? ? ?console.log(_this.optionsMetaShow)
? ?},
? ?filterSearch(item) {
? ? ?//dropDownValue是輸入框的值
console.log(this.dropDownValue)
? ? ?console.log(item.label.indexOf(this.dropDownValue))
? ? ?return item.label.indexOf(this.dropDownValue) === 0 ? true : false
? ?}
?}
}
</script>
<style>
.el-scrollbar {
?display: block !important;
}
</style>

其中最為主要的代碼就是

filterSearch(item) {
? ? ?//dropDownValue是輸入框的值

? ? ?return item.label.indexOf(this.dropDownValue) === 0 ? true : false
? ?}

通過(guò)這個(gè)我們就可以遍歷這個(gè)數(shù)組中Object中的label，因?yàn)椴欢甶ndexOf這個(gè)API所以我想了一個(gè)下午，這個(gè)時(shí)W3中給的解釋indexOf這個(gè)是菜鳥教程的解釋indexOf所以說(shuō)只有JS的基礎(chǔ)好才能寫代碼夠快????????