實現效果：

?

實現代碼：

顯示：

<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部分： <script>data() {var validateRefundPrice = (rule, value, callback) => {if (value >=this.canMaxRefundMoney) {callback(new Error('退款手續費不能大于最大可退金額'));}else{if(value==null || value==undefined || value==''){value=0;}this.actualRefundMoney= (parseFloat(this.canMaxRefundMoney)-parseFloat(value)).toFixed(2);callback();}};export default {return {actualRefundMoney:0,canMaxRefundMoney:0} 默認值是最大退款金額與實際退款金額相等： ? 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' }]},

總結

以上是生活随笔為你收集整理的ElementUI数据联动计算并实现数据校验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。