elementUI选择器Select 可下拉可选vue(硬写)

一、手写下拉框

这里要注意下拉，内联样式的宽度（min-width）和定位的top，left

<template>
  <el-row >
      <!-- input框 -->
       <el-form class="" :inline="true" >
            <el-form-item label="可下拉输入框：" prop="" id="heightleft" :class="dropDown?'dropDowninput':''" >
                <el-input size="small" :autofocus="dropDown" v-model="name "  class="search-icon"  clearable>
                  <i slot="suffix"  @click="dropDown=!dropDown" class="el-input__icon el-icon-arrow-up width14" tabindex="0" hidefocus="true" style="outline:0; "  @blur="selecthighlight()"  :style="dropDown?'transform: rotate(0deg);':'transform: rotate(180deg);'"></i>
                </el-input>              
            </el-form-item>
        </el-form>

      <!-- 可输入可选下拉f -->
                    <div class=" outerBox el-popper el-select-dropdown " :style="dropDown?'height:'+(tableData.length>0?(12+tableData.length*34):42)+'px;min-width: '+215+'px;position: absolute;top:'+32+'px;left:'+110+'px;transform-origin: center top;z-index: 2057;':'display:none;'" x-placement="bottom-start">
                        <div class="el-scrollbar1" :style="tableData.length==0?'display:none;':''">
                            <div class="clickclass" style="margin-bottom: -17px;">
                                <ul class="el-scrollbar__view el-select-dropdown__list">
                                    <li class="el-select-dropdown__item meiyong1" @click="setname(item.name)"  v-for="item in tableData" :key="item.name"><span>{{item.name}}</span></li>
                                </ul>
                            </div>
                            <div class="el-scrollbar__bar is-horizontal">
                                <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                            </div>
                            <div class="el-scrollbar__bar is-vertical">
                                <div class="el-scrollbar__thumb" style="transform: translateY(0%); height: 37.1387%;"></div>
                            </div>
                        </div>
                        <!-- 当数组无数据时 -->
                        <p v-if="tableData.length==0" class="el-select-dropdown__empty">
                            无数据
                          </p>
                    <!-- 角 -->
                        <div x-arrow="" class="popper__arrow" style="left: 35px;"></div>
                    </div>
  </el-row>
</template>

二、数据

<script>
export default {
data(){
  return{
    //控制下拉框显示隐藏
    dropDown:false,
    //model绑定值选中下拉时赋值
    name:'',
    //下拉数据
    tableData : [{
              name: '王小虎1',
            }, {
              name: '王小虎2',
            }, {
              name: '王小虎3',
            }, {
              name: '王小虎4',
            }]
      }
        return data
  },

  //失去焦点下拉框关闭
  methods:{
    //下拉按钮（向下箭头），失去焦点关闭下拉框
    selecthighlight(){
      //点击下方列表是也是（向下箭头）失去焦点太快，会导致列表点击事件不执行
      //加时间延迟
      setTimeout(item=>{
        this.dropDown=false
      },500)
    },
    //点击下拉框值改变
    setname(data){
      this.name=data
    }
  }
}
</script>

三、样式

<style  lang="scss">
  .dropDowninput{
    position: relative;
    .el-form-item__content .el-input .el-input__inner {
          border-color: #409EFF;
    }
  } 
</style>

四、我没有写点击下拉行高亮，如果想加上自己查一下吧。