vue+Elemetnui实现整个表单的复制

392 阅读1分钟

在后台管理系统中,可能会遇到需要整个复制表单的需求,我们可以利用vue中的v-for来实现,将整个表单作为一个独立的item,具体实现代码如下(注意rules的绑定方法):

微信截图_20211224102104.png 可以先自定义一个表单formObj:

微信截图_20211224102147.png 在data中的数据需要注意:定义一个初始list对象数组,自定义一条校验规则rulesObj以及初始的检验rulesForm[rulesObj]:

微信截图_20211224102341.png 点击新增事件,将整个表单push到list中:

微信截图_20211224103240.png 需要注意的是,校验规则也需要进行push,否则会导致新添加的表单中没有校验。