通过elementUI实现动态插入多个输入框

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

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

2.定义一个ruleTBForm

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

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

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

你可能感兴趣的:(通过elementUI实现动态插入多个输入框)