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

一、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嵌套内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！