elementui中table嵌套input并且当input输入一个数值后，其他input中的值根据计算公式相应改变

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

这里有个误区，就是很多人可能以为change事件是当输入框中的值改变后就会触发，但实际是change只有在input失去焦点的时候才会触发；
这里还需要注意两点：

哪个输入框在输入数据时, 其对应的字段不参与公式的计算(如该输入框对应的字段是a,则a=b+c不参与计算),因为有可能输入的值是1, 则参与公式计算后可能变成了2,导致输入值后过一会变成另一个值;
公式要按顺序排列,假设a=b+c,b=a+d,则a=b+c要放在b=a+d的前面; 因为b要用到a计算过后的值;

相关阅读:
SVA介绍
 自拟实现消息队列（MQ）基于Rabbit MQ（含概念和源码）巨详细！！！！！含思维导图
 基于javaweb的智慧社区设计与实现
 Go 语言中的 Moduels 管理（Let‘s Go 三十四）
BUUCTF-MISC-[GUET-CTF2019]soul sipse1
比较器和运放
 【C++】动态内存管理
 云原生—Rust编程语言能与CC++媲美
 华为HCDA论证教程
 让Git自动忽略指定文件
原文地址：https://blog.csdn.net/m0_50441807/article/details/127797601