element的form表单校验数组处理
出现场景
form表单里有需要校验的是表格,数据是数组
解决思路
1添加隐藏的input,校验使用该隐藏的input绑定的校验,当表格数据有值后,给input赋值取消校验.
<el-row :gutter="40">
<el-col :span="24">
<el-form-item label="测试表格"
prop="selectSum">
<!-- 隐藏的input -->
<el-input v-model="ruleForm.selectSum"
type="hidden"
class="LawTableInput"></el-input>
<el-row>
<!-- 表格 -->
<AddPeopleReTable :orglawTable="peopleList"
@getLawTabel="getLawTabel"
:peopleData="peopleData"></AddPeopleReTable>
</el-row>
</el-form-item>
</el-col>
</el-row>
扩展知识
type=“hidden”
定义隐藏字段,隐藏字段对于用户是不可见的。隐藏字段常常存储默认值,或者由 JavaScript 改变它们的值
2校验规则
rules: {
selectSum: [
{ required: true, message: '请选择测试表格', trigger: 'change' }
],
}
3input赋值
if (this.peopleList && this.peopleList.length > 0) {
this.ruleForm.selectSum = 999999;
} else {
this.ruleForm.selectSum = null;
}
4加了隐藏的input导致增加按钮样式不对,修改隐藏的input
.LawTableInput {
position: absolute;
}
5因为页面一进来,数组可能为空,会触发校验,所以进入是清空校验
mounted () {
this.$nextTick(() => {
this.$refs['ruleForm'].clearValidate(['selectSum']);
})
},