效果展示

 

代码

<el-form-item label="颜色">
   <el-tag
   :key="tag.name"
   v-for="tag in form.colors"
   closable
   :disable-transitions="false"
   @close="handleClose(tag)">
   {{tag.name}}
   </el-tag>
   <el-input
   class="input-new-tag"
   v-if="inputVisible"
   v-model="inputValue"
   ref="saveTagInput"
   size="small"
   @keyup.enter.native="handleInputConfirm"    按回车键调用
   @blur="handleInputConfirm">                 失去焦点后调用
   </el-input>
   <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>  点击出现input框

  inputVisible=true 打开input框

 

 

handleInputConfirm() {
   if(this.form.colors == null){
                this.form.colors = []  //如果没有数据，设为数组
    }
    this.form.colors.push({['name']:this.inputValue})  //添加一个键值对，值为input框输入的内容
    console.log(this.form.colors)
    this.inputVisible = false;  //关闭input框
    this.inputValue = '';  //关闭后清空input框
},
showInput() {  点击出现input框
    this.inputVisible = true;
    this.$nextTick(_ => {
    this.$refs.saveTagInput.$refs.input.focus();
    });
},