vue elment的select组件，实现可选择也可输入，不需要鼠标点击也不需要敲回车，可循环实现

https://element-plus.gitee.io/#/zh-CN/component/select

先来看官网里面的组件

 可创建条目的

<template>
<el-select
    v-model="value"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="请选择文章标签">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        value: []
      }
    }
  }
</script>

<style>

</style>

问题：

但是必须要鼠标点击或者是敲键盘的回车键，输入框v-model绑定的值才会变化

解决思路：

那我们就在input 失去焦点的时候，将input框内的值赋值给input框v-model绑定的值就可以了。

尝试：

html：

<el-select
              v-if="item.isEdit"
              v-model="item.cycleNum"
              @change="cycleNumChange($event, index)"
              allow-create
              clearable
              filterable
              default-first-option
              placeholder="请选择"
              @blur="selectBlur($event, item, index)"
            >
              <el-option
                v-for="item in timesOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>

 JavaScript：

function selectBlur(e, item, index) {
      console.log(e);
      console.log("item", item);
      console.log("index", index);
      console.log("e.target.value", e.target.value);
      console.log(typeof e.target.value);
      if (e.target.value !== "") {
        item.cycleNum = e.target.value;
      }
    }

给selectBlur函数传递三个值，看看着三个参数代表什么东西

 

• 这个是键盘输入6控制台打印的

•  这个是下拉框选择4控制台打印的

 

 item就是循环再当前项，当前项的值；

下拉框选择的时候e.target.value是个空字符串“ ” ，就可以判断赋值了，