Vue Js如何计算table上的值并在页脚上显示总和

Question

我想使用 bootstrap table 和 Vue Js 创建简单的发票。

基本上，我想要的如下图所示：

我试过下面的代码，但我对两件事感到困惑，

我该怎么办

1) 计算total cost并显示为footer summary。

2) rate和qnty相乘显示在cost上对应的输入框。

new Vue({
  el: '#app',
  methods: {
    addService() {
      this.model.services.push({});
    }
  },
  data: {
    model: {
      services: []
    },
    fields: [{
        key: "rate",
        label: "Rate"
      },
      {
        key: "qnty",
        label: "Qnty"
      },
      {
        key: "cost",
        label: "Cost"
      }
    ]
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-card header-tag="header" footer-tag="footer">
    <template slot="header" class="mb-0">
                    <button type="button" class="btn btn-primary btn-sm" @click.prevent="addService">
                        <icons :icon="['fas', 'plus']" /> Add Items/Service</button>
                </template>
    <b-card-body>
      <b-table responsive bordered striped hover caption-top :fields="fields" :items="model.services" foot-clone>
        <template slot="rate" slot-scope="data">

<b-form-input size="sm" class="form-control" v-model="data.item.rate" :name="`rate_${data.index}`" type="text" />

        </template>
        <template slot="qnty" slot-scope="data">
        
 <b-form-input size="sm" class="form-control" v-model="data.item.qnty" :name="`qnty_${data.index}`" type="text" />
 
         </template>
        <template slot="cost" slot-scope="data">
                            
         <b-form-input size="sm" class="form-control" v-model="data.item.cost" :name="`cost_${data.index}`" type="text" />
                        
        </template>
      </b-table>
    </b-card-body>
  </b-card>
</div>

我想要的方式很容易通过使用正常的 td 和 tr 以及计算函数来实现。

但我对如何使用 Bootstrap-vue 实施感到困惑。

请帮忙！

Answer 1

这里有一个快速的方法，可以计算到位的项目成本

<b-form-input :value="(data.item.rate * data.item.qnty) || 0" type="text" />

这里可以改进一下，更新item中的item total，通过watch t更新数据。

总数，但是使用计算值完成，该计算值使用 reduce 找到总数

  computed: {
    total: function() {
      return this.model.services.reduce(function(a, c){return a + Number((c.rate*c.qnty) || 0)}, 0)
    }
  },

完整代码如下：

Vue.config.productionTip = false
Vue.component('icons', {
  template: '<a><slot></slot></a>'
})
new Vue({
  el: '#app',
  methods: {
    addService() {
      this.model.services.push({});
    }
  },
  computed: {
    total: function() {
      return this.model.services.reduce(function(a, c){return a + Number((c.rate*c.qnty) || 0)}, 0)
    }
  },
  data: {
    model: {
      services: []
    },
    fields: [{
        key: "rate",
        label: "Rate"
      },
      {
        key: "qnty",
        label: "Qnty"
      },
      {
        key: "cost",
        label: "Cost"
      }
    ]
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-card header-tag="header" footer-tag="footer">
    <template slot="header" class="mb-0">
                    <button type="button" class="btn btn-primary btn-sm" @click.prevent="addService">
                        <icons :icon="['fas', 'plus']" /> Add Items/Service</button>
                </template>
    <b-card-body>
      <b-table responsive bordered striped hover caption-top :fields="fields" :items="model.services" foot-clone>
        <template slot="rate" slot-scope="data">

<b-form-input size="sm" class="form-control" v-model="data.item.rate" :name="`rate_${data.index}`" type="text" />

        </template>
        <template slot="qnty" slot-scope="data">
        
 <b-form-input size="sm" class="form-control" v-model="data.item.qnty" :name="`qnty_${data.index}`" type="text" />
 
         </template>
        <template slot="cost" slot-scope="data">
                            
         <b-form-input size="sm" class="form-control" :value="(data.item.rate * data.item.qnty) || 0" :name="`cost_${data.index}`" type="text" />
                        
        </template>
        <template slot="bottom-row" slot-scope="data">
        <td/><td>Total</td>
          <td>{{total}}</td>
        </template>
      </b-table>
      
    </b-card-body>
  </b-card>
</div>

Vue Js如何计算table上的值并在页脚上显示总和

Vue Js How to calculate the value on the table and display the sum on the footer

vuejs2

bootstrap-vue