在el-form中嵌套el-table时,表单校验问题

Z时代
2024-01-10
分类：技术分享

在el-form中嵌套el-table时, 对某个字段使用el-form-item加校验, 前面没有写el-form-item且没有配置校验会影响后面配置过的

<!-- 供应商预估金额 -->
<el-table-column width="200" :label="'供应商预估金额'">
<template slot-scope="scope">
<el-input v-model.trim="scope.row.supplierEstimatedAmt" :disabled="true"></el-input>
</template>
</el-table-column>
<!-- 设计变更预估金额 -->
<el-table-column width="120" :label="'设计变更预估金额'">
<template slot-scope="scope">
<span v-show="isShowSpan">
{{scope.row.alterationEstimatedAmt}}
</span>
<el-form-item
v-show="isEdit"
style="margin-top: 20px"
label-width="0"
:prop="'contractTableData.' + scope.$index + '.alterationEstimatedAmt'"
:rules='rules.alterationEstimatedAmt'
>
<amount-input
v-model.number="scope.row.alterationEstimatedAmt"
style="width: 100%;"
@blur="calcAmount"
:disabled="buttonDisable" />
</el-form-item>
</template></el-table-column>

// 并没有给supplierEstimatedAmt这个字段配置校验规则
alterationEstimatedAmt: [
{ required: true, message: '请输入预估金额', trigger: 'blur' },
{ type: 'number', message: '请输入数字' }],

但是却是supplierEstimatedAmt这个字段有校验