Vue+Element-ui实例_在form中动态校验tag标签

1.开发需求

在日常开发中，我们会遇到form表单的动态添加和校验，当我们需要在动态添加的内容中再次动态使用输入框的时候，就会变得很繁琐，我在网上找了很多案例，没有符合自己需求的内容，只好闲暇时间自己搞一下了...

比如一下操作，在一个输入框中输入多个批号，然后提示多个批号有逗号分开。这种操作让用户操作起来就很不方便
然后我就想到了，在element中，有一个动态添加tag的案例，于是就想着使用这个方式去动态添加多种批号，但是，但是，这个是放在动态表单中的，最主要的是要校验这个批号是否填写，所以，这个需求就有了很大的挑战性

2.实现演示

下面是我完成后的演示，请看

上述操作不仅仅实现了动态添加tag操作，也实现了动态校验每一个批号是否填写的功能（牛批）

3.主要难点解析

        3.1动态添加form表单

        其实这个对于一个前端来说没什么难点，这个在element中也有案例

        3.2动态校验动态添加的tag标签

        说到底，这个才是本文主要介绍的难点，因为tag的动态添加是循环一个数组，input只是为这个数组添加内容，但是你要在form表单中校验一个数组，你会使用什么组件呢，没错，就是多选框，请看代码

        我使用一个空的多选项，而且这个东西还不能给用户看到，v-show="false"隐藏掉，这样就能去“校验”tag标签了（机智如我）

        3.3动态的添加、删除tag标签

        其实这个在element中有案例，我单独拿出来说一下，肯定是有要提醒的地方，那就是在点击“添加批号”按钮的时候，按钮会“变成”输入框，如果只有一个tag标签数组就没有问题，和官网案例一样，但是要是多个tag标签数组就会报错，所有我们要动态添加一个“ref”,请看代码

在点击“添加批号”的按钮是，动态的去显示input输入框，并且使 input 获取焦点 

好啦难点也都讲完了，该给大家提供福利了，贴代码

点个赞呗~