如何将el-select和el-input结合

因为不熟悉js中的API受了一个下午的苦，最后还是AI提醒我怎么写的 谢谢git copilot😁😁😁😁

先粘贴一边代码，这块代码主要时针对数组中只有一个值的，而在很多时候我们select中的数值不止一个

首先我们先看看数组中只有一个类型的值我们该如何进行调用,我在原博主的代码上进行了一些修改，大家可以到原博主那边看看

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

这段代码是通过遍历数组进行取值的，我们通过console.log来看看这段代码打出的什么值

可以很清晰的看到一个是dropDownValue的值，也就是我们输入的值，另外一个则是判断的值，通过item历便整个数组进行查找，是否有值和我们输入的dropDownValue匹配，记住includes是模糊匹配菜鸟教程中的解释当然假如不熟悉也可以看看filter是干什么的菜鸟教程中的filter简单来说filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。所以可以解释为什么是循环整个数组了。

<template>
 <div class="common-wrapper">
   <el-select v-model="valueMeta" collapse-tags placeholder="请选择标签">
     <el-input type="text" placeholder="请输入" 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: ['华成云平台', '郑州中心', '深圳中心', '上海中心', '北京中心'],
     optionsMetaShow: ['华成云平台', '郑州中心', '深圳中心', '上海中心', '北京中心'],
     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>

好当你知道了怎么循环一个数组只有一个值时的情况，接下来我们来看看怎么查询数组中含有Object的情况，这个情境非常的常见，我也被困在这一个下午，我们先来看看代码，当然你也可以写一遍，如果出现了一些问题，可以参照我接下来的代码

<template>
 <div class="common-wrapper">
   <el-select v-model="valueMeta" collapse-tags placeholder="请选择标签">
     <el-input type="text" placeholder="请输入" 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: '华成云平台'
       },
       {
         value: 2,
         label: '郑州中心'
       },
       {
         value: 3,
         label: '深圳中心'
       },
       {
         value: 4,
         label: '上海中心'
       },
       {
         value: 5,
         label: '北京中心'
       }
     ],
     optionsMetaShow: [
       {
         value: 1,
         label: '华成云平台'
       },
       {
         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
   }

通过这个我们就可以遍历这个数组中Object中的label，因为不懂indexOf这个API所以我想了一个下午，这个时W3中给的解释indexOf这个是菜鸟教程的解释indexOf所以说只有JS的基础好才能写代码够快😥😥😥😥