最近在做一个项目，后端使用Spri艘绒庳焰ngBoot，前端使用Freemarker+Layui。有一天遇到了需要在前端页面输入明细数赍铈于脏据的需求，前端表单分为主要信息和明细信息的一对多数据组成，一番研究之后完成了任务，分享给大家，希望能有所帮助！
工具/原料
Layui
Chrome
VSCode
方法/步骤
1、首先说明需求，准备在主界面form上放一个“添加明细”的按钮和一个明细表格。
2、点击“添加明细”按钮之后，弹出对话框，输入明细数据，点击保存之后刷新表格数据。
3、同时在表格行中添加“编辑”恽但炎杰和“删除”按钮，点击编辑按钮同样弹出对话框更新该行数据，点击删除按钮则删掉该行数据。增删改操作都在页面端完成，不会调用后台服务，当点击主页面提交按钮时才提交数据到后台。
4、然后，我们先放上表格在页面中。如图所示，分为页面控件和脚本两部分，详情参见图中注释。
5、在页面中放dialog中页面，layui这里都是用layer.open来实现打开改蟠校盯昂dialog。我这里放一个form，用于添加明细。
6、放上，编辑，删除的事件代码，详情参见图中注释。。
7、点击“添加明细”按钮触发的事件代码。
8、最后在页面中放置一个隐藏控件，表格操作之后将数据写到这个控件中，这样主页面提交时会自动提交到后台。
