How to dynamically add rows and dynamically calculate internal values in vue tables

< hr >

the amount, discount ratio and discount amount in the table shown in the figure can be entered. The conversion relationship is:
amount X discount ratio = discount amount
and click the add row button to dynamically add a row of table rows, where each column is still an input box.
ask how to add two columns of data in each row and dynamically get the remaining data, such as writing 100 in the first row. If the ratio is 0.6, then the discount amount is automatically converted to 60, or the discount is written into 60, the proportion is written into 0.6, the amount is automatically converted to 100, and the total below is also calculated automatically.
ask for advice.

Javascript vue.js
Mar.04,2021

with the help of vue, it's easy.

Line number
output index when traversing, just like js traversing an array. 

v-for="(item, index) in items"
...
<td>{{index + 1}}</td>

the final total
is written with a fixed tr tag.
the sum of each column and the sum of that column can be calculated by passing the total data into the method or filter, and it is also dynamic. 

<tr>
  <td>{{countJinE(data)}}</td>
  ...
</tr>

you can add events to your input 

// template 

<el-input v-model="address.jine" @change="getAmount(index)" placeholder="" class="inLine"></el-input>

//  js me.listAdress table
getAmount (index) {
//                
                let me = this
                let totalAmout = 0
                debugger
                for (let i = 0; i <= index; iPP){
                    // 
                    totalAmout += Number( me.listAdress[i].jine)
                }
                console.log(totalAmout)
            },

is your form generated by v-for 

 <button @click="addnewTr"></button>
    <tr v-for="(item,index) in trs" :key="index">
        <td><input type="text"></td>
        <td><input type="text"></td>
    </tr>
    tr=[...]
 addnewTr(){
       this.trs.push(..)
   }

like this

Previous: How does vuejs refresh the current route?

Next: How do I extract the common elements from an array and put them into two arrays?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu