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官网实例——动态增减表单项