element-ui的el-table和el-form表单校验嵌

在项目有遇到table中嵌套form，并且带有表单验证的需求，效果图如下：

刚开始el-form-item定义了静态prop（prop=“sn”），结果input填入值后错误提示一直存在，自定义校验的value也为undefined，然后经百度大神提点，得知出错在prop

• ⚠️应该写动态prop保证唯一性。

:prop="'monitorData.' + scope.$index + '.sn'" 

• ⚠️不只是el-form才配置，每一个el-form-item都要配置rules属性

<el-form :model="monitorForm" :rules="monitorForm.monitorRules" ref="monitorForm">
  <el-table
      class="blue-theme add-virtual-table"
      empty-text="请 新增填写行 进行填写"
      :data="monitorForm.monitorData"
      style="width: 100%;">
      <el-table-column
          type="index"
          align="center"
          width="50"/>
      <el-table-column
          prop="sn"
          label="SN">
          <template slot-scope="scope">
            <el-form-item 
                :prop="'monitorData.' + scope.$index + '.sn'" 
                :rules="monitorForm.monitorRules.sn">
                <el-input
                    class="light-blue-theme"
                    clearable v-model="scope.row.sn"
                    placeholder="请输入sn"/>
            </el-form-item>
          </template>
      </el-table-column>
      <el-table-column
          label="品牌">
          <template slot-scope="scope">
              <el-form-item
                  :prop="'monitorData.' + scope.$index + '.type'"
                  :rules="monitorForm.monitorRules.type">
                  <el-input 
                      class="light-blue-theme" 
                      v-model="scope.row.type" 
                      placeholder="请输入品牌名称"/>
              </el-form-item>
          </template>
      </el-table-column>
      <el-table-column
          label="高度"
          min-width="160">
          <template slot-scope="scope">
              <el-form-item 
                  :prop="'monitorData.' + scope.$index + '.height'" 
                  :rules="monitorForm.monitorRules.height">
                  <el-input 
                      class="light-blue-theme"
                      v-model="scope.row.height"
                      placeholder="请输入高度"/>
              </el-form-item>
          </template>
      </el-table-column>
      <el-table-column
          prop="date"
          label="操作"
          width="100">
          <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete" 
                  circle
                  @click="handleDeleteRow(scope.$index, scope.row)"></el-button>
          </template>
      </el-table-column>
  </el-table>
</el-form>

data

monitorForm: {
    monitorData: [],
    monitorRules: {
       sn: [
           { required: true, message: 'SN不能为空', trigger: 'blur' }
       ],
       type: [
           { required: true, message: '品牌名称不能为空', trigger: 'blur' }
       ],
       height: [
           { required: true, message: '高度不能为空', trigger: 'blur' }
       ]
    }
}, // 存储表格table信息

element-ui官网实例——动态增减表单项

原文转载：(https://blog.csdn.net/xing_zlear/article/details/91127520?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param)[https://blog.csdn.net/xing_zlear/article/details/91127520?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param]