vue使用computed和watch监听实现表单控件的联动效果

vue: 直接使用iview的相关控件

1、template：提前安装iview,主要使用iview相关控件

<template>
  <div class="test">
    <Button @click="add">增加</Button>
    <Modal v-model="Model"
           :closable="false"
           :mask-closable="false">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
        <FormItem label="报销金额" prop="reimburseAmount">
          <Input v-model="formValidate.reimburseAmount" style="width: 320px" placeholder="请输入报销金额..."></Input>
        </FormItem>
        <FormItem label="税率 ( % )" prop="taxRate" :rules="{ required: true, message: '税率不能为空，请输入'}">
          <InputNumber
            :max="100"
            :min="1"
            v-model="formValidate.taxRate"
            style="width: 320px;"
            placeholder="请输入税率..."
            :formatter="value => `${value}%`"
            :parser="value => value.replace('%', '')">
          </InputNumber>
        </FormItem>
        <FormItem label="税额" prop="taxAmount" :rules="{ required: true, message: '税额不能为空且小数点后只能保留2位，请输入'}">
          <InputNumber
            v-model="formValidate.taxAmount"
            style="width: 320px"
            placeholder="请输入税额...">
          </InputNumber>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button  @click="Cancel">取消</Button>
        <Button type="primary" @click="Submit('formValidate')">确定</Button>
      </div>
    </Modal>
  </div>
</template>

2、data：主要定义需要用到的一些属性

// 验证报销金额
    const validateReimburseAmount = (rule, value, callback) => {
      let reg = /^\d+(?:\.\d{1,2})?$/
      if (!reg.test(value)) {
        callback(new Error('报销金额只能保留两位小数，请重新输入'))
      } else {
        callback()
      }
    }
    return {
      Model: false,
      formValidate: {
        reimburseAmount: 0,
        taxRate: 0,
        taxAmount: 0
      },
      ruleValidate: {
        reimburseAmount: [
          { required: true, message: '报销金额不能为空，请输入', trigger: 'blur' },
          {validator: validateReimburseAmount, trigger: 'blur'}
        ]
      }
    }

3、computed :计算当前控件的值

   reimburseAmounts () {
      return this.formValidate.reimburseAmount
    },
    taxRates () {
      return this.formValidate.taxRate
    },
    taxAmounts () {
      return this.formValidate.taxAmount
    }

4、watch : 监听报销金额和税率变化的时候，得到的税额

   reimburseAmounts (n, o) {
      // console.log("reimburseAmounts", n, o)
      this.formValidate.taxAmount = n * (this.formValidate.taxRate / 100)
      this.formValidate.taxAmount = parseFloat(this.formValidate.taxAmount.toFixed(2))
    },
    taxRates (n, o) {
      // console.log("taxRates", n, o)
      this.formValidate.taxAmount = this.formValidate.reimburseAmount * (n / 100)
      this.formValidate.taxAmount = parseFloat(this.formValidate.taxAmount.toFixed(2))
    },
    taxAmounts (n, o) {
      // console.log("taxAmounts", n, o)
      this.formValidate.taxAmount = parseFloat(this.formValidate.taxAmount.toFixed(2))
    }

5、methods ： 一些操作方法

 add: function () {
      let self = this
      self.Model = true
    },
    Cancel: function () {
      let self = this
      self.Model = false
    },
    Submit: function (name) {
      let self = this
      console.log(self.formValidate.taxAmount)
    }

具体操作可自行测试。

最后，谢谢我最亲爱的后援。MR LU