vue表格如何動態(tài)添加行數(shù)并動態(tài)計算內(nèi)部值

你的表格是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(..)
   }

比如這樣

即然是借助 vue 那就簡單了。

行號
遍歷的時候?qū)?index 輸出就行，就像 js 遍歷數(shù)組一樣。

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

最后的合計
用一個固定的 tr 標簽寫。
每列的總和和該列的總和都可以通過傳入總數(shù)據(jù)到方法或 filter 后計算得出，也是動態(tài)的。

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

可以給你的input上加上事件

// template 部分代碼

<el-input v-model="address.jine" @change="getAmount(index)" placeholder="請輸入內(nèi)容" class="inLine"></el-input>

// 給你寫個簡單列子 js方法 me.listAdress 這個是存放table的數(shù)組
getAmount (index) {
//                取得當前下標之前的參數(shù)
                let me = this
                let totalAmout = 0
                debugger
                for (let i = 0; i <= index; i++){
                    // 這邊可以計算結(jié)果出每行的結(jié)果
                    totalAmout += Number( me.listAdress[i].jine)
                }
                console.log(totalAmout)
            },