elementUI表单嵌套表格并对每行进行校验_el-table嵌套在el-form表单校验只校验某一行-CSDN博客

本文介绍如何在ElementUI中实现表单嵌套表格的校验功能，详细讲解了效果展示、关键代码及完整代码示例，包括表格数据的处理、字段校验方法的创建以及重置方法的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementUI表单嵌套表格并对每行进行校验

elementUI 表单嵌套表格并进行校验。

文章目录

效果展示

先看看这是不是需要的效果^_^

🪶🪶🪶

如图，ElementUI 表单里嵌套了表格，表格内每行能进行【保存】【新增】【编辑】【删除】【重置】等操作，同时可以对每行的某些字段进行校验（而不是整个表单校验！），这种需求很常见，所以记录下来。

代码链接

gitee地址

关键代码

表格数据

// 数据格式必须是【对象嵌套数组】，【form】绑定表单，【list】绑定表格
form: {
   
   
  // 表格数据
  list: [
      {
   
    id: 1, name: '小叶', age: '12', phone: '123456', show: true },
      {
   
    id: 2, name: '小李', age: '23', phone: '123457', show: true },
      {
   
    id: 3, name: '小林', age: '12', phone: '123458', show: true }
  ]
},

组件嵌套

添加字段校验的时候，格式必须写成这样的 :prop="'list.' + scope.$index + '.name'"

这是 elementui 规定的格式，渲染后的结果为 list.1.name

每个字段要动态绑定表单的 rules 属性

如果不是以上的格式，会出错！！！

// 表单必须嵌套在表格的外面，表单必须绑定【rules】【ref】属性
<el-form :model="form" :rules="rules" ref="form">
   <el-table :data="form.list">
       <el-tabl