Vue computed自动计算对象中的属性

需求

 总建筑面积 = 地上总建筑面积 + 地下总建筑面积

 总建筑面积禁止用户输入，而由用户输入的 “地上总建筑面积” 和 “地下总建筑面积”  自动求和得到

实现思路

用 computed自动计算总建筑面积

存在问题

 computed无法直接监听对象中的属性（在 computed中声明的变量，不能在data中重复定义）

解决方案

新定义一个变量得到自动求和的值，在变量值发生改变时，将值赋值给对象的属性（此处要使用$set赋值）

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

此处的新变量为zjzmj（在computed中使用后，不能在data中重复定义）

表单数据存在 formData对象中，formData对象内有三个属性：

• 地上建筑面积 dsmj
• 地下建筑面积 dxmj
• 总建筑面积 zjzmj

this.sum为全局求和函数

    //全局函数4——两个浮点数精确求和
    Vue.prototype.sum = function (num1,num2){
        var r1,r2,m;
        try{
            r1 = num1.toString().split('.')[1].length;
        }catch(e){
            r1 = 0;
        }
        try{
            r2=num2.toString().split(".")[1].length;
        }catch(e){
            r2=0;
        }
        m=Math.pow(10,Math.max(r1,r2));
        return Math.round(num1*m+num2*m)/m;
    }

表单核心代码

<el-form-item
        label="总建筑面积(㎡)："
        prop="zjzmj"
        :rules="[ { required: true, message: '请输入'}]"
>
    <el-input-number :disabled="true" :controls="false" :precision="2" :min="0" :max="100000000"
                     v-model="zjzmj">
    </el-input-number>
</el-form-item>

 

本文地址：https://blog.csdn.net/weixin_41192489/article/details/109238726