element 动态添加删除标签

首先HTML部分如下

因为我这里标签对应的内容是引入的组件，所以我把我要传给组件的参数用:rjKingSettingHandleInfo="item.content"传过去，这里建议要看一下组件引用的知识点了

声明数组和变量

添加和删除的方法

功能要求，判断是否已经打开页面，已经打开的就不再重复打开

该判断放在需要的地方，就是打开的时候进行循环判断

这里边的row是传进来的参数

这样就实现了新增标签和删除标签

效果图

在这里我的第一个标签页不能删除，所以我把删除按钮隐藏掉了

```

<div v-for="(item, index) intemp.templateValue" :key="index">

  <el-form-item v-if="0===index" :label="$t('模板内容值')" :prop="item" :rules="{required: true,message: `${item}不能为空`,trigger: 'blur'}" required>

    <el-input v-model="temp[item]" :placeholder = "`请输入${item}内容`" type="text" style="width: 300pxdisplay: block"/>

  <el-form-item v-else :prop="item" :rules="{required: true,message: `${item}内容不能为空`,trigger: 'blur'}" required>

    <el-input v-model="temp[item]" :placeholder = "`请输入${item}内容`" :rules="{required: true,message: `${item}不能为空`,trigger: 'blur'}" type="text" style="width: 300pxdisplay: block"/>

</div>

```

最近工作遇到一个需求，就是需要在一个输入框里面输入多个报关单号，用逗号隔开，但是如果直接让用户在一个输入框输入的话，用户可能会随便填写，也不方便校验，所以就改成了如下图所示实现方式，点开出现一个d框，d框里面有一个固定的输入框，后面显示一个加号按钮，通过点击加号按钮，可以动态的添加多个输入框，当点击确定按钮关闭d框的时候，通过前端处理，会把这几个d框里面输入的内容用逗号拼接之后，放入到最外层的输入框内。回显数据也是一样的道理，把输入框内用逗号拼接的数据拆分到d框里面，下面就介绍具体实现。

1.实现报关单输入框后面那个放大镜

2.定义一个ruleTBForm

3.写一个d框，通过v-for动态往里面加入输入框

4.实现handleCustoms方法，这个方法主要用来回显数据，把输入框内用逗号拼接的数据拆分到d框里面

5.实现加号按钮的addItem方法，删除按钮(垃圾桶图标)的deleteItem方法，并且通过逗号将几个输入框的值拼接起来

---