方法一
rules校验写在html部分
方法二
rules校验规则写在js部分
<el-form ref="form" :model="formData" label-width="148px" class="" :rules="formRules">
<el-row v-for="(item,index) in formData.tableChangeList" :key="index">
<el-col :span="7">
<el-form-item label="客户编号：" :prop="`tableChangeList.${index}.customerNumber`" :rules="formRules.customerNumber">
<el-input v-model="item.customerNumber" size="small" placeholder="请输入" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="完成时间：" :prop="`tableChangeList.${index}.workTime`" :rules="formRules.workTime">
<el-date-picker type="date" v-model="item.workTime" value-format="yyyy-MM-dd" placeholder="请选择" size="small" style="width: 100%;" :disabled="type=='view'"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row class="form-bottom-operation">
<el-col :span="7">
<el-form-item label="操作人：" prop="applyUserName">
<el-input v-model="applyUserName" size="small" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="操作部门：" prop="orgName">
<el-input v-model="orgName" size="small" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="操作日期：" prop="createTime">
<el-date-picker type="date" placeholder="选择日期" v-model="createTime" value-format="yyyy-MM-dd" size="small" style="width: 100%;" disabled></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<div class="form-bottom">
<el-button icon="iconfont icon-button" type="primary" @click="onSubmit" size="small" >提交</el-button>
</div>
</el-form>
// js部分：
formRules: {
customerNumber: [
{ required: true, message: '请输入客户编号', trigger: 'blur' },
],
workTime: [
{ required: true, message: '请选择完成时间', trigger: 'change' },
]
},
方法三
form嵌套
