Vue实现在两个input中分别输入数据,在第三个input中动态得出前两者的结果

https://blog.csdn.net/WhenTheWindBlows/article/details/87990745

                <a-form-model-item ref="specialNum" label="特殊作业" prop="specialNum">
                  <a-input-number
                    disabled="true"
                    v-model="commonData.specialNum"
                    :min="0"
                    :precision="0"
                    :formatter="limitNumber"
                    :parser="limitNumber"
                    @blur="
                      () => {
                        $refs.specialNum.onFieldBlur()
                      }
                    "
                  />
                </a-form-model-item>
          <a-form-model-item ref="specialFireNum" label="特级动火作业" prop="specialFireNum">
                  <a-input-number
                    :disabled="commonDisabled"
                    v-model="commonData.specialFireNum"
                    :min="0"
                    :precision="0"
                    :formatter="limitNumber"
                    :parser="limitNumber"
                    @blur="
                      () => {
                        $refs.specialFireNum.onFieldBlur()
                      }
                    "
                  />
                </a-form-model-item>
         <a-form-model-item ref="oneFireNum" label="一级动火作业" prop="oneFireNum">
                  <a-input-number
                    :disabled="commonDisabled"
                    v-model="commonData.oneFireNum"
                    :min="0"
                    :precision="0"
                    :formatter="limitNumber"
                    :parser="limitNumber"
                    @blur="
                      () => {
                        $refs.oneFireNum.onFieldBlur()
                      }
                    "
                  />
                </a-form-model-item>
           <a-form-model-item ref="twoFireNum" label="二级动火作业" prop="twoFireNum">
                  <a-input-number
                    :disabled="commonDisabled"
                    v-model="commonData.twoFireNum"
                    :min="0"
                    :precision="0"
                    :formatter="limitNumber"
                    :parser="limitNumber"
                    @blur="
                      () => {
                        $refs.twoFireNum.onFieldBlur()
                      }
                    "
                  />
                </a-form-model-item>
            <a-form-model-item ref="spaceNum" label="受限空间作业" prop="spaceNum">
                  <a-input-number
                    :disabled="commonDisabled"
                    v-model="commonData.spaceNum"
                    :min="0"
                    :precision="0"
                    :formatter="limitNumber"
                    :parser="limitNumber"
                    @blur="
                      () => {
                        $refs.spaceNum.onFieldBlur()
                      }
                    "
                  />
                </a-form-model-item>
  watch: {
    'commonData.specialFireNum': function(val) {
      this.commonData.specialNum =
        Number(this.commonData.oneFireNum) +
        Number(this.commonData.twoFireNum) +
        Number(this.commonData.spaceNum) +
        parseInt(val)
    },
    'commonData.oneFireNum': function(val) {
      this.commonData.specialNum =
        Number(this.commonData.specialFireNum) +
        Number(this.commonData.twoFireNum) +
        Number(this.commonData.spaceNum) +
        parseInt(val)
    },
    'commonData.twoFireNum': function(val) {
      this.commonData.specialNum =
        Number(this.commonData.specialFireNum) +
        Number(this.commonData.oneFireNum) +
        Number(this.commonData.spaceNum) +
        parseInt(val)
    },
    'commonData.spaceNum': function(val) {
      this.commonData.specialNum =
        Number(this.commonData.specialFireNum) +
        Number(this.commonData.oneFireNum) +
        Number(this.commonData.twoFireNum) +
        parseInt(val)
    },

 

posted @ 2022-03-21 15:50  奔向太阳的向日葵  阅读(952)  评论(0编辑  收藏  举报