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

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

---

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

---

效果展示

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

​

🪶🪶🪶

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

---

代码链接

• gitee地址

关键代码

1. 表格数据

// 数据格式必须是【对象嵌套数组】，【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 }
  ]
},

2. 组件嵌套

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

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

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

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

// 表单必须嵌套在表格的外面，表单必须绑定【rules】【ref】属性
<el-form :model="form" :rules="rules" ref="form">
   <el-table :data="form.list">
       <el-table-column prop="name" label="姓名">
           <template scope="scope">
  			// 每个字段