ElementUI数据联动计算并实现数据校验

小灰灰 2023-10-18 09:22 47阅读 0赞

### 实现效果： ###

![Image 1][]![70][]

### 实现代码： ###

显示：

<el-form-item label="最大可退金额:" v-if="refForm.auditStatus==2">
      {
       {canMaxRefundMoney}}元
    </el-form-item>
    <el-form-item label="实际退款金额:" v-if="refForm.auditStatus==2">
      {
       {actualRefundMoney}}元
    </el-form-item>
    <el-form-item label="退款手续费:"   prop="refundAlterPrice"   v-if="refForm.auditStatus==2">
      <el-input type="text"   v-model="refForm.refundAlterPrice" placeholder="退款手续费" ></el-input>
    </el-form-item>

script部分：

默认值是最大退款金额与实际退款金额相等：

this.actualRefundMoney=this.canMaxRefundMoney;

手续费验证：

<el-form-item label="退款手续费:"   prop="refundAlterPrice"   v-if="refForm.auditStatus==2">  <el-input type="text"   v-model="refForm.refundAlterPrice" placeholder="退款手续费" ></el-input></el-form-item>
     rules: {
            
              refundAlterPrice: [
                {pattern: /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '格式填写错误！'},
                {validator: validateRefundPrice, trigger: 'change' }
              ]
            },

[Image 1]: 
[70]: https://img-blog.csdn.net/20180929112115837?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70