el-form嵌套el-form 进行表单校验

 数据格式为form对象中嵌套一层可循环数组，数组内嵌套table表格，也可循环

1.  
   form: {
2.  
   id: row.id,
3.  
   process: [{
4.  
   code: '',
5.  
   log: [{
6.  
   id: ''
7.  
   }]
8.  
   }]
9.  
   }

1.  
   <el-form :model="form" ref="form" v-for="(item, index) in form.process" :key="index" class="bord">
2.  
   <el-form-item
3.  
   :prop="'process.' index '.code'"
4.  
   :rules="[{ required: true, message: '请选择数据', trigger: 'change' }]"
5.  
   >
6.  
   <el-select v-model="item.code" placeholder="请选择数据" @change="getChange(item,item.code)">
7.  
   <el-option
8.  
   v-for="i in data"
9.  
   :key="i.value"
10.  
    :label="i.label"
11.  
    :value="i.value"
12.  
    />
13.  
    </el-select>
14.  
    </el-form-item>
15.  
    <el-form :model="form.process[index]" ref="process.lage">
16.  
    <el-table
17.  
    ref="lage"
18.  
    class="sort-table"
19.  
    v-model="item.lage"
20.  
    :data="item.lage"
21.  
    max-height="240"
22.  
    :header-cell-style="{textAlign: 'center'}"
23.  
    :cell-style="{ textAlign: 'center' }"
24.  
    >
25.  
    <el-table-column
26.  
    type="index"
27.  
    label="序号"
28.  
    width="60"
29.  
    />
30.  
    <el-table-column
31.  
    prop="id"
32.  
    label="节点id"
33.  
    width="80"
34.  
    >
35.  
    <template v-slot="scope">
36.  
    <el-form-item
37.  
    :prop="'lage.' scope.$index '.id'"
38.  
    :rules="[{ required: true, message: '请输入id', trigger: 'blur' }]"
39.  
    >
40.  
    <el-input v-model="scope.row.id" placeholder="请输入id" />
41.  
    </el-form-item>
42.  
    </template>
43.  
    </el-table-column>
44.  
    </el-table>
45.  
    </el-form>
46.  
    </el-form>

 点击按钮提交表单时校验

1.  
   save() {
2.  
   Promise.all([this.$refs['form'][0].validate(), this.$refs['process.lage'][0].validate()]).then(() => {
3.  
   //接口等一系列正常操作
4.  
   })
5.  
   })
6.  
   },

这篇好文章是转载于：学新通技术网