element的el-form和el-table嵌套使用实现

目录

• 一、element的el-form和el-table嵌套使用
• 二、应用实例

一、element的el-form和el-table嵌套使用

要点：

• :model="addJsonForm" 给表单绑定数据，addJsonForm 是传入表单的数据对象
• 注意表单数据对象 addJsonForm 的定义：属性 params （可按需求命名）为表单内嵌套的表格的显示数据，数组类型； 属性 addJsonRules ，为表单绑定的验证规则。
• el-table： 采用自定义列模板，可自定义表头， el-form： 表单项绑定对应的字段名和校验规则
• :prop="'params.' + scope.$index + '.name'" 绑定传入Form 组件的 model 中对应的字段 name
• :rules="addJsonForm.addJsonRules.name" 绑定表单验证规则

二、应用实例

点击添加的时候，动态增加表格的行数，点击删除的时候，删除表格的行数据。

近期更新： 因评论区问到后续如何用 Form 表单的 resetFields 方法，这里就新加一个重置功能。

到此这篇关于element的el-form和el-table嵌套使用实现的文章就介绍到这了,更多相关element el-form和el-table嵌套内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！