vue表格点击新增添加一行,点击删除,删除一行代码实现(参考别人,勿喷)

html代码:

<div class="form-group" style="margin-left: 4.6%">
            <table style="border-collapse: separate;border-spacing: 10px" v-for="(item, index) in tableData">
                <thead>
                    <tr>
                        <td><span>选择银行:</span></td>
                        <td>
                            <select class="selectpicker show-tick form-control" style="width: 95%;">
                                <option v-for="bankType in bankTypes" :value="bankType.value">{
  {bankType.text}}</option>
                            </select>
                        </td>
                        <td><span>输入限额:</span></td>
                        <td><input class="form-control" type="text" placeholder="单笔限额" style="width: 95%;"/></td>
                        <td><span>费率类型:</span></td>
                        <td>
                            <select class="selectpicker show-tick form-control" v-model="item.feeType" style="width: 95%;">
                                <option v-for="feeType in feeTypes" :value="feeType.value">{
  {feeType.text}}</option>
                            </select>
                        </td>
                        <!--<td><div @click="testAdd(test.length)" style="cursor: pointer">新增</div></td>-->
                        <td><a class="btn btn-primary" @click="tableAdd"><i class="fa fa-plus"></i>&nbsp;新增</a></td>
                        <td><a class="btn btn-primary" @click="tableRemove(index)"><i class="fa fa-trash-o"></i>&nbsp;删除</a></td>
                        <!--<td><div @click="testRemove(index)" style="cursor: pointer">删除</div></td>-->
                    </tr>
                    <tr v-if="item.feeType=='1'">
                        <td><span>固定金额:</span></td>
                        <td>
                            <input class="form-control" type="text" v-model="item.amtRate" placeholder="元/笔" style="width: 95%; display: inline"/>
                            <label><span style="color: red; display: inline">*</span></label>
                        </td>
                    </tr>
                    <tr v-if="item.feeType=='2'">
                        <td><span>固定费率:</span></td>
                        <td>
                            <input class="form-control" type="text" v-model="item.amtRate" placeholder="%/笔" style="width: 95%; display: inline"/>
                            <label><span style="color: red; display: inline">*</span></label>
                        </td>
                        <td><span>最小:</span></td>
                        <td><input class="form-control" type="text" v-model="item.minAmt" placeholder="元/笔" style="width: 95%;"/></td>
                        <td><span>最大:</span></td>
                        <td><input class="form-control" type="text" v-model="item.maxAmt" placeholder="元/笔" style="width: 95%;"/></td>
                    </tr>
                    <tr v-if="item.feeType=='3'">
                        <td><span> </span></td>
                        <td><span>阶梯金额</span></td>
                        <td><span>最小:</span></td>
                        <td><input class="form-control" type="text" v-model="item.minAmt" placeholder="元/笔" style="width: 95%;"/></td>
                        <td><span>最大:</span></td>
                        <td><input class="form-control" type="text" v-model="item.maxAmt" placeholder="元/笔" style="width: 95%;"/></td>
                    </tr>
                    <tr v-if="item.feeType=='3'" v-for="(data, i) in item.trData">
                        <td><span> </span></td>
                        <td><span> </span></td>
                        <td><span>区间:</span></td>
                        <td>
                            <input class="form-control" type="text" v-model="data.below" placeholder="****元以下" style="width: 95%; display: inline"/>
                            <label><span style="color: red; display: inline">*</span></label>
                        </td>
                        <td><span>费率:</span></td>
                        <td>
                            <input class="form-control" type="text" v-model="data.single" placeholder="**元/笔" style="width: 95%; display: inline"/>
                            <label><span style="color: red; display: inline">*</span></label>
                        </td>
                        <td><a class="btn btn-primary" @click="trAdd(index)">&nbsp;新增</a></td>
                        <td><a class="btn btn-primary" @click="trRemove(index, i)">&nbsp;删除</a></td>
                    </tr>
                    <tr v-if="item.feeType=='3'">
                        <td><span> </span></td>
                        <td><span> </span></td>
                        <td><span>其他:</span></td>
                        <td>
                            <input class="form-control" type="text" placeholder="**元/笔" v-model="item.other" style="width: 95%; display: inline"/>
                            <label><span style="color: red; display: inline">*</span></label>
                        </td>
                    </tr>
                </thead>
            </table>
        </div>

JavaScript代码

var vm = new Vue({ 
    //当前vue对象接管的区域
    el: '#rrapp',
    //属性
    data: { 
        //银行类型
        bankTypes: [
            { text: '招商银行', value: '1'}
        ],
        //费率类型
        feeTypes: [
            { text: '固定金额', value: '1'},
            { text: '固定费率', value: '2'},
            { text: '阶梯区间', value: '3'}
        ],
        //表格数据
        tableData: [{ index: 0, feeType: null, amtRate: null, minAmt: null, maxAmt: null, other: null, trData: [{ index: 0, below: null, single: null}]}]
    },
    //自定义方法
    methods: { 
        //查询
        query: function () { 
            vm.reload();
        },
        //新增表格
        tableAdd: function () { 
            console.log("新增表格之前:" +  JSON.stringify(this.tableData));
            vm.tableData.push({ index: this.tableData.length, feeType: null, amtRate: null, minAmt: null, maxAmt: null, other: null, trData: [{ index: 0, below: null, single: null}]});
            console.log("新增表格之后:" + JSON.stringify(this.tableData));
        },
        //移除表格 参数为表格索引
        tableRemove: function (index) { 
            console.log("删除表格第" + index + "行");
            console.log("删除表格之前:" + JSON.stringify(this.tableData));
            if (index === 0) { 
                alert("第一行无法删除");
                return;
            }
            //从第 index 行删除,删除 1 行
            this.tableData.splice(index, 1);
            //删除之后,重组索引,不然会出错
            console.log("删除表格之后,重组索引之前:" + JSON.stringify(this.tableData));
            for (var i in this.tableData) { 
                this.tableData[i].index = i;
            }
            console.log("删除表格之后,重组索引之后:" + JSON.stringify(this.tableData));
        },
        //新增表格行 参数为表格索引
        trAdd: function (index) { 
            console.log("新增表格行之前:" +  JSON.stringify(this.tableData[index].trData));
            this.tableData[index].trData.push({ index: this.tableData[index].trData.length, below: null, single: null});
            console.log("新增表格行之后:" + JSON.stringify(this.tableData[index].trData));
        },
        //移除表格行
        trRemove: function (index, i) { 
            console.log("删除表格行第" + i + "行");
            console.log("删除表格行之前:" + JSON.stringify(this.tableData[index].trData));
            if (i === 0) { 
                alert("第一行无法删除");
                return;
            }
            //从第 index 行删除,删除 1 行
            this.tableData[index].trData.splice(i, 1);
            //删除之后,重组索引,不然会出错
            console.log("删除表格行之后,重组索引之前:" + JSON.stringify(this.tableData[index].trData));
            for (var j in this.tableData[index].trData) { 
                this.tableData[index].trData[j].index = j;
            }
            console.log("删除表格行之后,重组索引之后:" + JSON.stringify(this.tableData[index].trData));
        }
    原文作者:Anhk丶
    原文地址: https://blog.csdn.net/qq_45829350/article/details/108600244
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞