下拉选择输入框(基于elment-ui)

最近在需求中，需要有一个下拉选择功能，又得可以输入，在 element-ui 官网找了，发现没有适合的，然后在修炼 cv 大法的我，也在网上看了一下，但是也都感觉不合适，所以就自己写了两个，供大家参考一下

下拉选择输入框子组件1 代码：

<template>
  <div class="container">
    <el-popover v-model="visible"
                trigger="click"
                popper-class="select-input"
                placement="bottom"
                width="400">
      <div>
        <div class="item"
             v-for="(item,index) in selectArr"
             :key="index"
             @click="chooseItem(item)">{{ item[selectObj.label] }}</div>
      </div>
      <el-input slot="reference"
                v-model="input"
                placeholder="请输入内容"
                @input="inputChange"></el-input>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: 'select-input-popover',
  props: {
    inputValue: {  // 父组件需要改变的数据
      type: String,
      default: ''
    },
    selectArr: {  // 下拉的选项
      type: Array,
      default: () => []
    },
    selectObj: {
      type: Object,
      default: () => ({
        value: 'value',   // 选中的时候赋的值
        label: 'label'     // 用于显示的名称
      })
    }
  },
  watch: {
    input (val) {
      const obj = this.selectArr?.find((el) => {
        return el[this.selectObj.label] == val
      })
      if (obj) {       // 判断 input 的名称是否是下拉选择框里面的名称，如果是，把下拉选择框里面的值赋给父组件
        this.$emit('update:inputValue', obj[this.selectObj.value])
        return
      }
      this.$emit('update:inputValue', val)   // 如果 input 的名称不是下拉选择框里面的名称，把 input 的值赋给父组件
    }
  },
  data () {
    return {
      visible: false,
      input: ''
    };
  },
  methods: {
    chooseItem (item) {
      this.input = item[this.selectObj.label]
      this.visible = false
      this.$emit('update:inputValue', item[this.selectObj.value])
    },
    inputChange () {
      this.visible = false

    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  left: 200px;
  top: 200px;
  margin: 0;
  max-width: 500px;
}
.item {
  cursor: pointer;
  padding: 0 20px;
  height: 34px;
  line-height: 34px;
  &:hover {
    background: #f5f7fa;
  }
}
</style>
<style>
.select-input {
  padding: 6px 0 !important;
}
</style>

下拉选择输入框子组件2 代码：

<template>
  <div class="container">
    <el-dropdown @visible-change="test"
                 trigger="click"
                 @command="handleCommand">
      <span class="el-dropdown-link">
        <el-input class="item"
                  v-model="input"
                  placeholder="请输入内容"></el-input>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(item,index) in selectArr"
                          :key="index"
                          :command="item">{{ item[selectObj.label] }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
  
  <script>
export default {
  name: 'select-input',
  props: {
    inputValue: {  // 父组件需要改变的数据
      type: String,
      default: ''
    },
    selectArr: {  // 下拉的选项
      type: Array,
      default: () => []
    },
    selectObj: {
      type: Object,
      default: () => ({
        value: 'value',   // 选中的时候赋的值
        label: 'label'     // 用于显示的名称
      })
    }
  },
  watch: {
    input (val) {
      const obj = this.selectArr?.find((el) => {
        return el[this.selectObj.label] == val
      })
      if (obj) {       // 判断 input 的名称是否是下拉选择框里面的名称，如果是，把下拉选择框里面的值赋给父组件
        this.$emit('update:inputValue', obj[this.selectObj.value])
        return
      }
      this.$emit('update:inputValue', val)   // 如果 input 的名称不是下拉选择框里面的名称，把 input 的值赋给父组件
    }
  },
  data () {
    return {
      input: ''
    }
  },
  updated () {
    console.log(123);
  },
  methods: {
    test () {
      console.log(789);
    },
    handleCommand (val) {  // 处理选项
      //   console.log(val, 'val');
      //   console.log(this.selectObj.value, 'selectObj');
      this.input = val[this.selectObj.label]
    }
  }
}
  </script>
  
  <style scoped>
.container {
  position: absolute;
  left: 200px;
  top: 200px;
  margin: 0;
  max-width: 500px;
}
.el-dropdown-menu {
  top: 35px;
  width: 100%;
}
</style>

父组件代码

<template>
  <div id="app">
    <ownSelect1 :inputValue.sync="value"
                :selectArr="options"
                :selectObj="selectObj"></ownSelect1>
  </div>
</template>

<script>
import ownSelect1 from "./components/ownSelect1.vue"

export default {
  name: 'App',
  components: {
    ownSelect1
  },
  data () {
    return {
      options: [{
        itemValue: '选项1',
        itemLabel: '黄金糕'
      }, {
        itemValue: '选项2',
        itemLabel: '双皮奶'
      }, {
        itemValue: '选项3',
        itemLabel: '蚵仔煎'
      }, {
        itemValue: '选项4',
        itemLabel: '龙须面'
      }, {
        itemValue: '选项5',
        itemLabel: '北京烤鸭'
      }],  // 下拉的选项
      selectObj: {
        value: 'itemValue',   // 选中的时候赋的值
        label: 'itemLabel'    // 用于显示的名称
      },
      value: '',  // 输入框或者下拉框 赋的值
    }
  }
}
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  height: 100vh;
}
</style>

效果：

直接输入：

选项：

以上我自己写的组件代码，可以直接粘贴到项目中使用，不过我在网上看，其中有一篇的文章的，我觉得还不错，不过后面我发现有点麻烦，我懒得去细细研究他的做法，在这里我也提一下，有兴趣的可以自己去研究一下，他说的是，把 el-input 组件 和 el-select 放在一起，然后通过定位来把 el-input 放在 el-select 下拉选择的那里，其中 el-input** 和 **el-select 绑定一样的值