对一个输入框添加按钮新增删除功能

原样式：

<el-row>
	 <el-col :span="12" style="display: flex;justify-content: flex-end;flex-wrap: wrap;">
		<el-form-item style="width: 100% " label="单号">
			<el-input style="width: 100%" show-word-limit maxlength="8"v-model.trim="item.taps"></el-input>
		</el-form-item>
	</el-col>
</el-row>

对输入框进行for循环，添加按钮与点击事件：

HTML：
 <el-col :span="12" style="display: flex;justify-content: flex-end;flex-wrap: wrap;">
          <el-form-item style="width: 100% " v-for="(item,index) of add" :key="index" label="tapCode">
            <el-input style="width: 100%" show-word-limit maxlength="8" v-model.trim="item.adds"></el-input>
          </el-form-item>
          <el-button icon="el-icon-circle-close" @click="DelAdd"></el-button>
          <el-button type="primary" plain @click="OnAdd">+</el-button>
        </el-col>

js：
OnAdd() {
      this.add.push({
        adds: ''
      })
    },
DelAdd(item, index) {
      if ( this.add.length <= 1 ) {//如果只有一个输入框则不可以删除
        return false
      }
      this.add.splice(index, 1)//删除了数组中对应的数据也就将这个位置的输入框删除
    },

注：for循环可写在input也可form-item，input只循环输入框，点击按钮只会新增删减输入框；form-item是为了让输入框的前缀一起循环。
按钮可写在form-item里也可在外，我不想每个输入框旁边都被循环出来按钮，就只写在外面，只有一个按钮，不会循环按钮