Vue Js如何在表上计算值并在页脚上显示总和 [英] Vue Js How to calculate the value on the table and display the sum on the footer
问题描述
我想使用引导表和Vue Js创建简单的发票.
I wanted to create simple invoice using bootstrap table and Vue Js.
基本上,我想要的显示在下图中:
Basically, What i wanted is shown in the image below:
我已经按照下面的代码尝试过,但是我对两件事感到困惑,
I have tried as in the code below, but i am confused on two things,
我应该如何
1)计算total cost
并将其显示为footer summary
.
1) Calculate the total cost
and show that as the footer summary
.
2)将rate
和qnty
相乘,并显示在cost
的相应输入框中.
2) Multiply rate
and qnty
and display on the corresponding input box on 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
可以轻松实现我想要的方式.
The way i wanted is easily achieved by using normal td
and tr
, with computed function.
但是我对如何使用Bootstrap-vue
实施感到困惑.
But i am confused with how to implement using Bootstrap-vue
.
请帮助!
推荐答案
这是一种快速的方法,它可以就地计算物料成本
Here's a quick way, that calculates the item cost in place
<b-form-input :value="(data.item.rate * data.item.qnty) || 0" type="text" />
在这里可以进行改进以通过使用手表t更新数据来更新项目中的项目总数.
Improvements can be made here to update the item total in the item, by using a watch t update the data.
总计,但是使用使用reduce
查找总计
the total, however is done using a computed value that uses reduce
to find the total
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如何在表上计算值并在页脚上显示总和的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!