代码之家 › 专栏 › 技术社区 › Rashik

Vue JS如何计算表中的值并在页脚显示总和

bootstrap-vue vuejs2

Rashik · 技术社区 · 6 年前

我想使用引导表和VueJS创建简单的发票。

基本上,我想要的是下面的图片:

我试过下面的代码,但我在两件事上感到困惑,

我该怎么办

1)计算 总成本,并将其作为页脚摘要显示出来。


   
    
     2)将
     
      速率乘以
      
       和
       
        qnty,并在相应的输入框上显示在
        
         cost上。
        
       
      
     
    
    
     
      
       
        
        
        
         
          new vue({
EL:“应用程序”,
方法:{
addService()。{
this.model.services.push();
}
}
数据:{
型号:{
服务:[]
}
字段:【{
密钥:“速率”,
标签:“费率”
}
{
密钥:“qnty”,
标签:“QNTY”
}
{
密钥:“成本”,
标签:“成本”
}
]
}
})<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”@单击。prevent=“addservice”>
<icons:icon=“['fas','plus']”/>添加项目/服务</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”/>gt;

</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”/>gt;

</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”/>gt;

</template>
</b-表格>
</b-card-body>
</B卡>
</DIV>>=
         
         
         
        
        
         
          我想要的方式很容易实现,通过使用带计算功能的Normal
          
           td和
           
            tr
            
             。
            
           
          
         
         
          
           
            
             但我对如何使用
             
              bootstrap vue实现感到困惑。
             
            
            
             
              请帮忙!
             
             
             
             
              我试过下面的代码,但我在两件事上感到困惑,
             
             
              我该怎么办
             
             
              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
              
              .
             
             
              请帮助!

1 回复 | 直到 6 年前

Sphinx 6 年前

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

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

这里可以通过使用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>