vue el-select 下拉菜单 数据回显不在清除数据可编辑状态

思路：当点击options的时候，让select 失去焦点（跳到其他的地方），添加el-input 就是为了把光标跳转到其上面，然后将其隐藏掉，则为看不到光标点， 但是在点击第一次之后获取焦点focus之后，隐藏掉下拉菜单的时候 @blur是无效的，此时只能通过监听下拉框是否是隐藏和显示状态来让其失去焦点事件，所以需要使用 @visible-change="changeVisible" 来监听，true/false 来进行焦点跳转

 

代码：

template:

<el-form-item label="提单号" prop="shipBillNo" >

             

              <el-select

                v-model="form.shipBillNo"

                @change.native="selectChange"

                @focus="changeFocus"

                filterable

                clearable

                no-match-text=" "

                class="changeSelect"

                @visible-change="changeVisible"

              >

                <el-option

                  v-for="(item, index) in billNo_options"

                  :key="index"

                  :label="item"

                  :value="item"

                  @click.native="changeOptions(item)"

                />

              </el-select>

              <el-input  class="changeInput" ref="inputRef"></el-input>

            </el-form-item>

 

Javascript

     // 判断下拉框是否是隐藏

changeVisible(data){

// 如果下拉框是隐藏的时候，则让select 失去光标

     if(!data){

        this.changeInput();

     }

    },

    selectChange(e){

        this.$set(this.form,"shipBillNo",e.target.value);

    },

    // 切换光标

    changeInput(){

      this.$refs.inputRef.focus();

    },

    // 选中option

    changeOptions(data){

      this.form.shipBillNo ="";

      this.$nextTick(()=>{

        setTimeout(()=>{

          this.$set(this.form,"shipBillNo",data);

        },200)

      })

      this.changeInput();

    },

    // 下拉框获取光标

    changeFocus(){

      let shipBillNo = this.form.shipBillNo;

      this.form.shipBillNo ="";

      this.$nextTick(()=>{

        setTimeout(()=>{

          this.form.shipBillNo = shipBillNo;

          this.$set(this.form,"shipBillNo",shipBillNo);

        })  

      },200)

     

    }

 

css：

.changeInput{position: absolute; top: 0; left: 0; z-index: 0;}

.changeSelect{ position: absolute;top: 0; left: 0; z-index: 1;}