<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
.el-input-number {
width: 100%;
}
.el-input-number>.el-input-number__decrease {
display: none;
}
.el-input-number>.el-input-number__increase {
display: none;
}
.el-input__inner {
padding-left: 10px !important;
padding-right: 0px !important;
text-align: left !important;
}
</style>
<body>
<div id="app">
<p>
<h3>计算公式：</h3>
<div>含税单价=不含税单价*(1+税率)</div>
<div>不含税单价=含税单价/(1+税率)</div>
<div>含税金额=本次结算量*含税单价</div>
<div>不含税金额=本次结算量*不含税单价</div>
<div>税额=含税金额-不含税金额</div>
</p>
<br />
<el-table :data="tableData1" ref="multipleTable">
<el-table-column type="index" label="序号" width="50">
</el-table-column>
<el-table-column prop="thisSettlementNum" label="本次结算量" width="180">
<template slot-scope="scope">
<el-input-number v-model="scope.row.thisSettlementNum" :min="0" :precision="2"
@change="calculate(scope.row,'thisSettlementNum')">
</el-input-number>
</template>
</el-table-column>
<el-table-column prop="price" label="不含税单价" width="180">
<template slot-scope="scope">
<el-input-number v-model="scope.row.price" :min="0" :precision="2" @change="calculate(scope.row,'price')">
</el-input-number>
</template>
</el-table-column>
<el-table-column prop="taxRate" label="税率" width="180">
<template slot-scope="scope">
<el-input-number v-model="scope.row.taxRate" :min="0" :precision="2" @change="calculate(scope.row,'taxRate')">
</el-input-number>
</template>
</el-table-column>
<el-table-column prop="taxPrice" label="含税单价" width="180">
<template slot-scope="scope">
<el-input-number v-model="scope.row.taxPrice" :min="0" :precision="2"
@change="calculate(scope.row,'taxPrice')">
</el-input-number>
</template>
</el-table-column>
<el-table-column prop="mount" label="不含税金额" width="180">
<template slot-scope="scope">
<el-input-number v-model="scope.row.mount" :min="0" :precision="2" disabled></el-input-number>
</template>
</el-table-column>
<el-table-column prop="taxMount" label="含税金额" width="180">
<template slot-scope="scope">
<el-input-number v-model="scope.row.taxMount" :min="0" :precision="2" disabled></el-input-number>
</template>
</el-table-column>
<el-table-column prop="taxFreeAmount" label="税额" width="180">
<template slot-scope="scope">
<el-input-number v-model="scope.row.taxFreeAmount" :min="0" :precision="2" disabled></el-input-number>
</template>
</el-table-column>
</el-table>
</div>
<br>
<div>
注意：
<p>1.哪个输入框在输入数据时, 其对应的字段不参与公式的计算(如该输入框对应的字段是a,则a=b+c不参与计算),因为有可能输入的值是1, 则参与公式计算后可能变成了2,导致输入值后过一会变成另一个值;</p>
<p>2.公式要按顺序排列,假设a=b+c,b=a+d,则a=b+c要放在b=a+d的前面; 因为b要用到a计算过后的值;</p>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
tableData1: [
{
thisSettlementNum: null, price: null, taxRate: null, taxPrice: null, mount: null, taxMount: null, taxFreeAmount: null }
]
}
},
methods: {
// 计算逻辑
calculate(row, type) {
if (type != 'taxPrice') {
// 含税单价 = 不含税单价*(1+税率)
row.taxPrice = row.price * (1 + (row.taxRate / 100))
}
if (type != 'price') {
// 不含税单价 = 含税单价/(1+税率)
row.price = row.taxPrice / (1 + (row.taxRate / 100))
}
if (type != 'taxMount') {
// 含税金额 = 本次结算量*含税单价
row.taxMount = row.thisSettlementNum * row.taxPrice
}
if (type != 'mount') {
// 不含税金额 = 本次结算量*不含税单价
row.mount = row.thisSettlementNum * row.price
}
if (type != 'taxFreeAmount') {
// 税额 = 含税金额-不含税金额
row.taxFreeAmount = row.taxMount - row.mount
}
}
}
})
</script>
</html>
这里有个误区，就是很多人可能以为change事件是当输入框中的值改变后就会触发，但实际是change只有在input失去焦点的时候才会触发；
这里还需要注意两点：
- 哪个输入框在输入数据时, 其对应的字段不参与公式的计算(如该输入框对应的字段是a,则a=b+c不参与计算),因为有可能输入的值是1, 则参与公式计算后可能变成了2,导致输入值后过一会变成另一个值;
- 公式要按顺序排列,假设a=b+c,b=a+d,则a=b+c要放在b=a+d的前面; 因为b要用到a计算过后的值;