Element ui Table内嵌套校验

需求

在table内嵌套了输入框，需要校验输入框的内容

主要思路

1、通过element的form的rules属性来设置校验规则来解决 2、通过template传递的scope的$index属性来确定是table数组中的哪一个

效果图

相关代码

html

<el-form :model="InspectionSaveData" ref="formData">
   <el-table :data="InspectionSaveData.detailsList" border @row-dblclick="tableRowDblclick">
   <el-table-column prop="name" label="Name" width="190px">
       <template slot-scope="scope">
           <span v-show="!scope.row.isEditor">{{ scope.row.qcTime }}</span>
           <span v-show="scope.row.isEditor">
               <el-form-item :prop="'detailsList.' + scope.$index + '.qcTime'" :rules="rules.qcTime">
               <el-input type="number" v-model.trim="scope.row.qcTime" clearable> </el-input>
               </el-form-item>
           </span>
       </template>
   </el-table-column>
   </el-table>
</el-form>

tips： table中校验的数组数据必须要form中model数据中。 eg：

InspectionSaveData：{
	detailsList:[],
	...
}

js

rules:{
       name:[{required: true, message:'请输入name',trigger:'change'}],
       type:[{required: true, message:'请输入type',trigger:'change'}],
       Number:[{type: "number", message: "Number必须为数字值", transform:function(value) {return value === "" ? 0 : Number(value);},}]
     },

_this.$refs['formData'].validate(valid => {
        if (valid) {
		...
		}
}）