如何在刪除行時重新排列序列號

Question

我有一個動態 HTML 表格，點擊add我正在向表格中添加項目，對於每一行我有一個刪除按鈕，點擊我刪除該行。

當我單擊add時，我將我的S_No並將其放置到 S_No 列中。

問題

假設我創建了 5 行，然后我刪除了第二行，因此它顯示 1,3,4,5 而不是 1,2,3,4。

我試過的

但是這個工作不正常。

this.tableDatas.forEach((element,index) => {
      alert(element)
       this.tableDatas.push({
        S_No:index + 1
         });
    });

 Vue.component("form-row", { template: "#row-template", props: { S_No: Number, itemname: String, quantity: Number, sellingprice: Number, amount: Number }, computed: { quantitySynced: { get() { return this.quantity; }, set(v) { this.$emit("update:quantity", +v); } }, sellingpriceSynced: { get() { return this.sellingprice; }, set(v) { this.$emit("update:sellingprice", +v); } }, amountSynced() { this.$emit("update:amount", parseFloat(this.quantity) * parseFloat(this.sellingprice)); return this.amount } } }); new Vue({ el: "#app", data() { return { tableDatas: [], S_No: 1 }; }, methods: { btnOnClick(v) { let S_No = this.S_No++; this.tableDatas.push({ S_No, itemname: "item", quantity: 1, sellingprice: 55, amount: 55 }); }, btnOnDelete(key) { this.tableDatas.splice(key, 1); } }, computed: { calculate() { return ( this.tableDatas.reduce((total, { amount }) => total + amount, 0) || 0 ); } } }); Vue.config.productionTip = false; Vue.config.devtools = false;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <table class="table table-striped table-hover table-bordered mainTable" id="Table"> <thead> <tr> <th class="sno">S No</th> <th class="itemName">Item Name</th> <th>Quantity</th> <th>Selling Price</th> <th>Amount</th> </tr> </thead> <tbody> <form-row v-for="(row, key) in tableDatas" :key="key" v-bind.sync="row" @delete="btnOnDelete(key)"></form-row> </tbody> </table> <div> <label>Total Row's Amount</label> <input type="text" disabled :value="calculate"> </div> </div> <script type="text/x-template" id="row-template"> <tr> <td> <input class="form-control" readonly :value="S_No"> </td> <td> <input class="form-control" readonly :value="itemname" /> </td> <td> <input class="form-control text-right" type="number" min="0" step="1" v-model="quantitySynced" /> </td> <td> <input class="form-control text-right" type="number" min="0" step=".5" v-model="sellingpriceSynced" /> </td> <td> <input readonly class="form-control text-right" type="number" min="0" step="1" :value="amountSynced" /> </td> <td> <button @click="$emit('delete')">Delete</button> </td> </tr> </script>

Answer 1

你可以像再次循環到你的數組來重新排列鍵一樣。 也許不是最好的解決方案，但它會解決你現在的問題。 看下面的代碼

btnOnDelete(key) {
    this.tableDatas.splice(key, 1);

   this.tableDatas.forEach((element, index) => {
       element.S_No = index+1
   });
}

Answer 2

檢查這個：

 Vue.component("form-row", { template: "#row-template", props: { S_No: Number, itemname: String, quantity: Number, sellingprice: Number, amount: Number, index: Number }, computed: { quantitySynced: { get() { return this.quantity; }, set(v) { this.$emit("update:quantity", +v); } }, sellingpriceSynced: { get() { return this.sellingprice; }, set(v) { this.$emit("update:sellingprice", +v); } }, amountSynced() { this.$emit("update:amount", parseFloat(this.quantity) * parseFloat(this.sellingprice)); return this.amount } } }); new Vue({ el: "#app", data() { return { tableDatas: [], S_No: 1 }; }, methods: { btnOnClick(v) { let S_No = this.S_No++; this.tableDatas.push({ S_No, itemname: "item", quantity: 1, sellingprice: 55, amount: 55 }); }, btnOnDelete(key) { this.tableDatas.splice(key, 1); } }, computed: { calculate() { return ( this.tableDatas.reduce((total, { amount }) => total + amount, 0) || 0 ); } } }); Vue.config.productionTip = false; Vue.config.devtools = false;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <table class="table table-striped table-hover table-bordered mainTable" id="Table"> <thead> <tr> <th class="sno">S No</th> <th class="itemName">Item Name</th> <th>Quantity</th> <th>Selling Price</th> <th>Amount</th> </tr> </thead> <tbody> <form-row v-for="(row, key) in tableDatas" :key="key" v-bind.sync="row" :index="key" @delete="btnOnDelete(key)"></form-row> </tbody> </table> <div> <label>Total Row's Amount</label> <input type="text" disabled :value="calculate"> </div> </div> <script type="text/x-template" id="row-template"> <tr> <td> <input class="form-control" readonly :value="index + 1" /> </td> <td> <input class="form-control" readonly :value="itemname" /> </td> <td> <input class="form-control text-right" type="number" min="0" step="1" v-model="quantitySynced" /> </td> <td> <input class="form-control text-right" type="number" min="0" step=".5" v-model="sellingpriceSynced" /> </td> <td> <input readonly class="form-control text-right" type="number" min="0" step="1" :value="amountSynced" /> </td> <td> <button @click="$emit('delete')">Delete</button> </td> </tr> </script>

Answer 3

使用父組件的索引作為子組件的道具。 刪除元素后，索引也會自動更新。 在這里找到工作解決方案

 new Vue({ el: '#app', data() { return { tableDatas: [], S_No: 1 }; }, methods: { btnOnClick(v) { let S_No = this.S_No++; this.tableDatas.push({ S_No, itemname: "item", quantity: 1, sellingprice: 55, amount: 55 }); }, btnOnDelete(key) { this.tableDatas.splice(key, 1); } }, computed: { calculate() { return ( this.tableDatas.reduce((total, { amount }) => total + amount, 0) || 0 ); } } }) Vue.component("form-row", { template: "#row-template", props: { S_No: Number, itemname: String, quantity: Number, sellingprice: Number, amount: Number, indexdata: Number }, computed: { quantitySynced: { get() { return this.quantity; }, set(v) { this.$emit("update:quantity", +v); } }, sellingpriceSynced: { get() { return this.sellingprice; }, set(v) { this.$emit("update:sellingprice", +v); } }, amountSynced() { this.$emit("update:amount", parseFloat(this.quantity) * parseFloat(this.sellingprice)); return this.amount } } });

 <script src="https://unpkg.com/vue"></script> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <table class="table table-striped table-hover table-bordered mainTable" id="Table"> <thead> <tr> <th class="sno">S No</th> <th class="itemName">Item Name</th> <th>Quantity</th> <th>Selling Price</th> <th>Amount</th> </tr> </thead> <tbody> <form-row v-for="(row, key) in tableDatas" :key="key" :indexdata="key" v-bind.sync="row" @delete="btnOnDelete(key)"></form-row> </tbody> </table> <div> <label>Total Row's Amount</label> <input type="text" disabled :value="calculate"> </div> </div> <script type="text/x-template" id="row-template"> <tr> <td> <input class="form-control" readonly :value="indexdata"> </td> <td> <input class="form-control" readonly :value="itemname" /> </td> <td> <input class="form-control text-right" type="number" min="0" step="1" v-model="quantitySynced" /> </td> <td> <input class="form-control text-right" type="number" min="0" step=".5" v-model="sellingpriceSynced" /> </td> <td> <input readonly class="form-control text-right" type="number" min="0" step="1" :value="amountSynced" /> </td> <td> <button @click="$emit('delete')">Delete</button> </td> </tr> </script>