vue 文本输入自动计算求和实现

写在前面

一般实现多个文本输入计算求和的方法是通过el-input 的change事件或者keyup.native 事件实现，

但是一般通过这两种方法实现计算求和，一般都需要点击页面某一处后，才会调用方法实现求和，实现不了实时自动求和

此时考虑使用 computed和watch；关于computed和watch 参考
https://cn.vuejs.org/v2/api/#computed
https://cn.vuejs.org/v2/api/#watch

代码实现示例 

使用computed和watch实现多数据求和示例

<template>
<div>
   <el-form :inline="true" :rules="rules" ref="ruleForm1" :model="formInline"	id="form_table" label-width="170px">
     <el-row type="flex" class="row-bg edit_form">
             <el-col :span="12">
				<el-form-item label="总支出:" >
					<el-input v-model="formInline.totalMoney"  disabled>
					</el-input>
				</el-form-item>
			</el-col>
		/el-row>
   </el-form>
</div>
<div style="float:right"><el-button type="primary" size="small" @click="addData()">添加</el-button></div>
  <div>
              <el-form :model="formInline" ref="outputForm">
                <el-table :data="formInline.monthData" border  :header-cell-style="headerStyle" :cell-style="headerCellStyle">
                  <el-table-column type="index" label="序号"  width="80"></el-table-column>
                  <el-table-column label="月份">
                    <template slot-scope="scope">
                      <el-form-item :prop="'dayPlanOutputs.'+scope.$index+'.month'" :rules="rules.month">
                         <el-date-picker   v-model="scope.row.month"	type="month" format="yyyy-MM"  value-format="yyyy-MM"  placeholder="选择月份"
                          style="width:95%">
                        </el-date-picker>                        
                      </el-form-item>
                    </template>
                  </el-table-column>
                    <el-table-column label="支出（元）" width="150">
                      <template slot-scope="scope">
                        <el-form-item :prop="'dayPlanOutputs.'+scope.$index+'.money'" :rules="rules.decimal">
                          <el-input  v-model="scope.row.money">
                          </el-input>
                        </el-form-item>
                    </template>
                    </el-table-column>
                    <el-table-column label="操作" width="80">
                      <template slot-scope="scope">
                        <el-button style="color: #6a9dca" icon="el-icon-delete" type="text" size="small" @click="delData(scope.$index)">
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                </el-table>
              </el-form>
            </div>
</template>
<script>
import Cookies from "js-cookie";
import moment from "moment";
export default {
  data() {
    return {
      reload: true,
      tabIndex: "0",
      contentStyleObj: {
        height: "670px",
      },
      rules: {
        month:[{
            required: true,
            message: "请选择月份",
            trigger: "change",
          }
        ],
        decimal: [
          {
            message: "只能为最多两位小数数字",
            trigger: "change",
            pattern: /(^$)|^[0-9]+(.?[0-9]{1,2})?$/,
          },
        ]
      },
      formInline: {
        totalMoney:0,
        monthData:[]
      }
    };
  },
  computed: {
    monthDatas() {
  　　　　return this.formInline.monthData;
  　　}
  },
   watch: {
    monthDatas: {
      deep: true,  // 深度监听
      handler(newVal,oldVal) {
         this.calculateSum();
      }
    }
  },
  mounted() {
  },
  methods: {
    //添加数据行
    addData(){
      var newTunnelRow={
        month:"",
        money:0
       };
      this.$forceUpdate(this.formInline.monthData.push(newTunnelRow));
    },
    //删除数据航
    delData(rowIndex){
      this.$forceUpdate(this.formInline.monthData.splice(rowIndex, 1));
    },
    //计算求和
    calculateSum(){
      let total=0;
      this.formInline.monthData.forEach((item)=>{
        let money=(item.money)&&!isNaN(item.money)?Number(item.money):0;
        total=total+money;
      });
      this.$set(this.formInline,"totalMoney",total);
    }
  }
};
</script>