需求
总建筑面积 = 地上总建筑面积 + 地下总建筑面积
总建筑面积禁止用户输入，而由用户输入的 “地上总建筑面积” 和 “地下总建筑面积” 自动求和得到
实现思路
用 computed自动计算总建筑面积
存在问题
computed无法直接监听对象中的属性（在 computed中声明的变量，不能在data中重复定义）
解决方案
computed中新定义一个变量zjzmj【其实变量名是啥不重要】，在其中写入自动计算的逻辑即可，实现自动监听 this.formData.dsmj和this.formData.dxmj的变化
computed: { 'zjzmj'(){ this.formData.zjzmj = this.sum(this.formData.dsmj, this.formData.dxmj) } } },
此处的新变量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" v-model="formData.zjzmj"> </el-input-number> </el-form-item>
