image.png

使用侦听器

  watch: {
    "taskModal.formValidate.unitHeight"() {
      this.getCube();
    },
    "taskModal.formValidate.unitLength"() {
      this.getCube();
    },
    "taskModal.formValidate.unitWidth"() {
      this.getCube();
    },
  },

 getCube() {
      let cube = "";
      let form = this.taskModal.formValidate;
      if (!!form.unitHeight && !!form.unitLength && !!form.unitWidth) {
        cube = form.unitHeight * form.unitLength * form.unitWidth;
        form.unitVolume = cube;
      }
    },

在表单里的数据代码

 <FormItem label="长" prop="unitLength">
          <InputNumber
            v-model="taskModal.formValidate.unitLength"
            :min="0"
            style="width: 100%"
            placeholder="请输入长"
          ></InputNumber>
        </FormItem>
        <FormItem label="宽" prop="unitWidth">
          <InputNumber
            v-model="taskModal.formValidate.unitWidth"
            :min="0"
            style="width: 100%"
            placeholder="请输入宽"
          ></InputNumber>
        </FormItem>
        <FormItem label="高" prop="unitHeight">
          <InputNumber
            v-model="taskModal.formValidate.unitHeight"
            :min="0"
            style="width: 100%"
            placeholder="请输入高"
          ></InputNumber>
        </FormItem>
        <FormItem label="立方数" prop="unitVolume">
          <InputNumber
            v-model="taskModal.formValidate.unitVolume"
            :min="0"
            style="width: 100%"
            placeholder="请输入立方数"
          ></InputNumber>
        </FormItem>

image.png

eg 计算属性计算对象里的值

  computed: {
            'zz': {
                get: function () {
                    return this.sum(this.formData.dsmj, this.formData.dxmj)
                },
                set: function (newValue) {
                    this.$set(this.formData, 'zz', newValue)
                }
            }
        }

<el-input-number :disabled="true" :controls="false" :precision="2" :min="0" :max="100000000"
                     v-model="zz">
    </el-input-number>