vue计算table列的和，在另一个table响应式展示数据

先看一下效果图

 

 

 

在两个table上，根据增加一行输入数据，响应式的计算table列的总数，在第二个table展示，结合官网和查到的资料可以简单做列的计算，使用computed计算属性

1   computed: {
2     sumBillMoney: function () {
3       return this.commonOutpatient
4         .map((row) => row.billMoney)
5         .reduce((acc, cur) => parseFloat(acc) + parseFloat(cur), 0);
6     },
7 }

展示数据

            <el-table-column
              v-model="sumBillMoney"
              label="费用总金额"
              align="center"
            >
              {{ sumBillMoney }}
            </el-table-column>

 

但是有了新的问题就是不实时响应，此时我们应该不难想到失焦，但是怎么将他们结合起来呢？

第一步：在data中定义一个key为空

 

 

第二步：在需要响应数据的table绑定 :key=key,如下图

 

 第三步：失焦将key赋值给一个值，可以是任意值this.key = Math.random();