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

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

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

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

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

这段代码的原博主地址

这段代码是通过历便数组进行取值的，我们通过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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ArU435X9-1651398853288)(https://raw.githubusercontent.com/lanksi/cludpng-of-typora/master/cludpng-of-typora/image-20220501174628835.png)]

其中最为主要的代码就是

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

      return item.label.indexOf(this.dropDownValue) >= 0
    }

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