0

我是 vue.js 的新手，我正在尝试在表格内的每一行中添加垃圾图标并激活它以删除行但它不起作用，我怎样才能将一个单元格的输入作为下拉菜单或列表内表行。以下脚本是从教程https://smarttutorials.net/dynamically-add-or-remove-table-row-using-vuejs/复制而来 ，非常感谢您的帮助

<!DOCTYPE html>
<html>
    <head>
    <title>Report Generation</title>
        <meta charset = "UTF-8" />
    </head>
    <body> 
        <div id="app">
            <table>
                <thead>
                    <tr>
                        <th scope ="col">#</th>
                        <th scope ="col">Item No</th>
                        <th scope ="col text-right">Item Name</th>
                        <th scope ="col text-right">Price</th>
                        <th scope ="col text-right">Quntatiy</th>
                        <th scope ="col text-right">Total</th>              
                    </tr>
                </thead>
            <tr v-for="(invoice_product, index) in invoice_products" :key="index">
                <td scope="row" class="trashIconContainer">
                    <i class="far fa-trash-alt" @click="deleteRow(index, invoice_product)"></i>
                </td>
               
                <td>
                    <input class="form-control" type="text" v-model="invoice_product.product_no" />
                </td>
                <td>
                    <input class="form-control" type="text" v-model= "invoice_product.product_no" />
      </v-col>
                </td>
                <td>
                    <input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_price" @change="calculateLineTotal(invoice_product)"
                    />
                </td>
                <td>
                    <input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_qty" @change="calculateLineTotal(invoice_product)"
                    />
                </td>
                <td>
                    <input readonly class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.line_total" />
                </td>
            </tr>
        </table>
            <button type='button' class="btn btn-info" @click="addNewRow">
                <i class="fas fa-plus-circle"></i>
                Add
            </button>
            <button    @click="deleteRow">
            <i class="fas fa-plus-circle"></i>
                Delete
        </button>
    </template>
        </div>
        <script src= "js/vue.js"> </script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    invoice_products: [{
                        product_no: '',
                        product_name: '',
                        product_price: '',
                        product_qty: '',
                        line_total: 0
                    }]
                },methods: {
                
                    deleteRow(index, invoice_product) {
                        var idx = this.invoice_products.indexOf(invoice_product);
                        console.log(idx, index);
                        
                            this.invoice_products.splice(idx, 2);          
            
                    },
                    addNewRow() {
                        this.invoice_products.push({
                            product_no: '',
                            product_name: '',
                            product_price: '',
                            product_qty: '',
                            line_total: 0
                        });
                    }
                }
            });
        </script>
    </body>
</html> ```
4

2 回答 2

1

可能您应该将按钮移动到 v-for 中，并且不要忘记 tbody 标签

<table>
    <thead>
    <tr>
      <th scope ="col">#</th>
      <th scope ="col">Item No</th>
      <th scope ="col text-right">Item Name</th>
      <th scope ="col text-right">Price</th>
      <th scope ="col text-right">Quntatiy</th>
      <th scope ="col text-right">Total</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(invoice_product, index) in invoice_products" :key="index">
      <td scope="row" class="trashIconContainer">
        <i class="far fa-trash-alt" @click="deleteRow(index, invoice_product)"></i>
      </td>

      <td>
        <input class="form-control" type="text" v-model="invoice_product.product_no" />
      </td>
      <td>
        <input class="form-control" type="text" v-model= "invoice_product.product_no" />
      </td>
      <td>
        <input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_price" @change="calculateLineTotal(invoice_product)"
        />
      </td>
      <td>
        <input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_qty" @change="calculateLineTotal(invoice_product)"
        />
      </td>
      <td>
        <input readonly class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.line_total" />
      </td>
      <td>
        <button type='button' class="btn btn-info" @click="addNewRow">
          <i class="fas fa-plus-circle"></i>
          Add
        </button>
      </td>
      <td>
        <button    @click="deleteRow">
          <i class="fas fa-plus-circle"></i>
          Delete
        </button>
      </td>
    </tr>
    </tbody>
  </table>
于 2021-12-25T21:28:16.613 回答
0

试试下面的代码片段：

var app = new Vue({
  el: "#app",
  data() {
    return {
      invoice_products: [{
          id: this.uniqueId(),
          product_no: '',
          product_name: '',
          product_price: '',
          product_qty: '',
          line_total: 0
      }]
    }
  },
  methods: {
    deleteRow(product) {
      this.invoice_products = this.invoice_products.filter(p => p.id !== product.id)       
    },
    addNewRow() {
      const id = this.uniqueId()
      this.invoice_products.push({
          id,
          product_no: '',
          product_name: '',
          product_price: '',
          product_qty: '',
          line_total: 0
      });
    },
    calculateLineTotal(product) {
      if (product.product_price && product.product_qty) {
        product.line_total = product.product_price * product.product_qty
      }
      this.invoice_products = [
        ...this.invoice_products.map((item) =>
          item.id !== product.id
            ? item
            : {
              ...item,
              ...product,
            }
        ),
      ];
    },
    uniqueId(length=16) {
      return parseInt(Math.ceil(Math.random() * Date.now()).toPrecision(length).toString().replace(".", ""))
    }

  }
})
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button type='button' class="btn btn-info" @click="addNewRow">
    <i class="fas fa-plus-circle"></i>
    Add
  </button>
  <table>
    <thead>
      <tr>
        <th scope ="col">#</th>
        <th scope ="col">Item No</th>
        <th scope ="col text-right">Item Name</th>
        <th scope ="col text-right">Price</th>
        <th scope ="col text-right">Quntatiy</th>
        <th scope ="col text-right">Total</th>              
      </tr>
    </thead>
    <tr v-for="(invoice_product, index) in invoice_products" :key="index">
      <td scope="row" class="trashIconContainer">
        <i class="far fa-trash-alt" @click="deleteRow(invoice_product)"></i>
      </td>
      <td>
        <input class="form-control" type="text" v-model="invoice_product.product_no" />
      </td>
      <td>
        <input class="form-control" type="text" v-model= "invoice_product.product_name" />
      </td>
      <td>
        <input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_price" @change="calculateLineTotal(invoice_product)"
          />
      </td>
      <td>
        <input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_qty" @change="calculateLineTotal(invoice_product)"
          />
      </td>
      <td>
        <input readonly class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.line_total" />
      </td>
    </tr>
  </table>
</div>

于 2021-12-25T21:51:45.440 回答