从表中添加和删除多行

Question

我的vue 应用程序中有一个动态表，可在单击按钮时添加或删除行。表格如下所示。

<table class="stripped centered">
        <thead>
          <tr>
            <th></th>
            <th>No.</th>
            <th>Part No.</th>
            <th>Description</th>
            <th>Quantity</th>
            <th>unit market price</th>
            <th>Markup percentage</th>
            <th><a @click="addRow " class="waves-effect waves-light btn blue darken-3 white-text">Add row</a></th>
          </tr>
        </thead>
        <tbody class="body-rows" v-for="(row, index) in tableRows" :key="index">
          <tr>
            <td><a @click.prevent="deleteRow(index)" class="waves-effect waves-light btn red darken-3 white-text"><i class="material-icons left">delete</i></a></td>
            <td><input class="item-no" type="number" step="0.001" placeholder="Item no"></td>
            <td><input class="part-no" type="text" placeholder="part no"></td>
            <td><input type="text" placeholder="description"></td>
            <td><input class="quantity" type="number" step="0.01" placeholder="quantity"></td>
            <td><input class="ump" type="number" step="0.01" placeholder="UMP"></td>
            <td><input class="markup" type="number" step="0.01" placeholder="markup %"></td>
            <td><a class="add-sub waves-effect waves-light btn teal darken-3 white-text"><i class="material-icons left">add</i>sub</a></td>
          </tr>
          <tr>
            <td><div class="chip">Freight and Insurance</div></td>
            <td><div class="chip">Other costs</div></td>
            <td><div class="chip">Custom Rates</div></td>
            <td><div class="chip">Excise Tax</div></td>
            <td><div class="chip">VAT</div></td>
            <td><div class="chip">Surtax</div></td>
            <td><div class="chip">Withholding Tax</div></td>
          </tr>
          <tr>
            <td><input type="number" placeholder="freight & insurance"></td>
            <td><input type="number" placeholder="other costs"></td>
            <td><input type="number" placeholder="custom rates"></td>
            <td><input type="number" placeholder="excise tax"></td>
            <td><input type="number" placeholder="vat"></td>
            <td><input type="number" placeholder="surtax"></td>
            <td><input type="number" placeholder="withholding"></td>
          </tr>
        </tbody>
      </table>

如您所见，我试图在v-for 循环的一次迭代中添加三行。在我的脚本中，我有：

data(){
    return{
          currentRows: 0,
          tableRows: [],
    }
}
methods:{
    addRow(){
      this.currentRows++
      this.tableRows.push(this.currentRows)
    },
    deleteRow(index){
      this.tableRows.splice(index, 1)
},

添加按钮起作用并添加三行。但是，当我单击该行上的删除按钮时，它会删除最后一行而不是自行删除。任何帮助，将不胜感激。谢谢

Answer 1

你的实现应该是这样的

<table class="stripped centered">
    <thead>
      <tr>
        <th></th>
        <th>No.</th>
        <th>Part No.</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>unit market price</th>
        <th>Markup percentage</th>
        <th><a @click="addRow " class="waves-effect waves-light btn blue darken-3 white-text">Add row</a></th>
      </tr>
    </thead>
    <tbody class="body-rows">
      <tr v-for="(row, index) in tableRows" :key=":key="JSON.stringify(row)"">
          <td>
            <table>
               <tr>
        <td><a @click.prevent="deleteRow(index)" class="waves-effect waves-light btn red darken-3 white-text"><i class="material-icons left">delete</i></a></td>
        <td><input class="item-no" type="number" step="0.001" placeholder="Item no"></td>
        <td><input class="part-no" type="text" placeholder="part no"></td>
        <td><input type="text" placeholder="description"></td>
        <td><input class="quantity" type="number" step="0.01" placeholder="quantity"></td>
        <td><input class="ump" type="number" step="0.01" placeholder="UMP"></td>
        <td><input class="markup" type="number" step="0.01" placeholder="markup %"></td>
        <td><a class="add-sub waves-effect waves-light btn teal darken-3 white-text"><i class="material-icons left">add</i>sub</a></td>
      </tr>
      <tr>
        <td><div class="chip">Freight and Insurance</div></td>
        <td><div class="chip">Other costs</div></td>
        <td><div class="chip">Custom Rates</div></td>
        <td><div class="chip">Excise Tax</div></td>
        <td><div class="chip">VAT</div></td>
        <td><div class="chip">Surtax</div></td>
        <td><div class="chip">Withholding Tax</div></td>
      </tr>
      <tr>
        <td><input type="number" placeholder="freight & insurance"></td>
        <td><input type="number" placeholder="other costs"></td>
        <td><input type="number" placeholder="custom rates"></td>
        <td><input type="number" placeholder="excise tax"></td>
        <td><input type="number" placeholder="vat"></td>
        <td><input type="number" placeholder="surtax"></td>
        <td><input type="number" placeholder="withholding"></td>
      </tr>
            </table>
          </td>          
      </tr>
    </tbody>
    </table>