【element-ui】在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" style="width: 100%;" :disabled="true"></el-input>
            </template>
          </el-table-column>
          <!-- 设计变更预估金额 -->
          <el-table-column width="120" :label="'设计变更预估金额'">
            <template slot-scope="scope">
              <span v-show="isShowSpan" style="width: 100%;">
                {{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这个字段有校验