Vue+element 實現表格的增加行、刪除行的功能

Vue+element 實現表格的增加行、刪除行的功能，先看下效果：

如圖，點擊添加行數下方會新增一行表格，點擊刪除 會刪除相應行的表格

 

實現代碼：

定義一個數組用來放表格數據

  tableData2:[{
            pjzbid: "",
            yyfh: '',
            yyqh: '',
            yyzh:"",//已用止號
            yyzs:"",//已用張數
            yyje:"",//已用金額
            wyfh:"",//未用符號
            wyqh:"",//未用起號
            wyzh:"",//未用止號
            wyzs:"",//未用張數
        }],

在添加框中加一個div做容器

 

        <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="cancel('addRuleForm')">
            <el-form :model="addRuleForm" ref="addRuleForm" :rules="rules">
                <el-col :span="12">
                    <el-form-item label="交班人 :" :label-width="formLabelWidth" prop="jbrmc">
                        <el-select v-model="addRuleForm.jbrmc" placeholder="請選擇" ref="selectAppType">
                            <el-option  :value="treeData" style="height: auto">
                                <el-tree :data="treeData"
                                         :default-expanded-keys="[expandedKeys]" :highlight-current="true"
                                         :expand-on-click-node="false" node-key="id"
                                         @node-click="handleNodeClick"></el-tree>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="接班人" :label-width="formLabelWidth" prop="jbrymc">
                        <el-select v-model="addRuleForm.jbrymc" placeholder="請選擇"  ref="selectAppType1">
                            <el-option  :value="treeData" style="height: auto">
                                <el-tree :data="treeData"
                                         :default-expanded-keys="[expandedKeys]" :highlight-current="true"
                                         :expand-on-click-node="false" node-key="id"
                                         @node-click="handleNodeClick2"></el-tree>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="交接崗位" :label-width="formLabelWidth" prop="ssip" >
                    <el-select v-model="addRuleForm.ssip" placeholder="所屬崗位" clearable @change="checkgw">
                        <el-option
                                v-for="item in gwxx"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                </el-col>

                <div v-show="ckh">
                    <el-col :span="12">
                    <el-form-item label="窗口號" :label-width="formLabelWidth" prop="ckh">
                        <el-select v-model="addRuleForm.ckh" placeholder="窗口號" clearable @change="checkckh">
                            <el-option
                                    v-for="item in ck"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                        </el-col>
                </div>


                <el-col :span="12">
                    <el-form-item label="現金:" :label-width="formLabelWidth" prop="xj">
                        <el-input v-model="addRuleForm.xj" placeholder="現金(元)" clearable type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="支票(張):" :label-width="formLabelWidth" prop="zpz">
                        <el-input v-model="addRuleForm.zpz" placeholder="支票（張）" clearable type="text"></el-input>
                   <!--     <el-input-number v-model="addRuleForm.zpz" :min="1" :max="100"></el-input-number>-->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="支票（元）" :label-width="formLabelWidth" prop="zpy">
                        <el-input v-model="addRuleForm.zpy" placeholder="支票（元）" clearable type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="銀行卡憑證(張):" :label-width="formLabelWidth" prop="yhkpzz">
                      <!--  <el-input-number v-model="addRuleForm.yhkpzz" :min="1" :max="100"></el-input-number>-->

                        <el-input v-model="addRuleForm.yhkpzz" placeholder="銀行卡憑證（張）" clearable type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="銀行卡憑證（元）" :label-width="formLabelWidth" prop="yhkpzy">
                        <el-input v-model="addRuleForm.yhkpzy" placeholder="銀行卡憑證（元）" clearable type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="備用金" :label-width="formLabelWidth" prop="byj">
                        <el-input v-model="addRuleForm.byj" placeholder="備用金" clearable type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="備品" :label-width="formLabelWidth" prop="bp">
                        <el-input v-model="addRuleForm.bp" placeholder="備品" clearable type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="交接事項" :label-width="formLabelWidth" prop="jjsx">
                        <el-input v-model="addRuleForm.jjsx" placeholder="交接事項" clearable type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="已交付行李票" :label-width="formLabelWidth" prop="yjfxlp">
                        <el-input v-model="addRuleForm.yjfxlp" placeholder="已交付行李票" clearable type="text"></el-input>
                        <!--<el-input-number v-model="addRuleForm.yjfxlp" :min="1" :max="100"></el-input-number>-->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="已交付包裹票" :label-width="formLabelWidth" prop="yjfbgp">
                        <el-input v-model="addRuleForm.yjfbgp" placeholder="已交付包裹票" clearable type="text"></el-input>
                    <!--    <el-input-number v-model="addRuleForm.yjfbgp" :min="1" :max="100"></el-input-number>-->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="已交付貨票" :label-width="formLabelWidth" prop="yjfhp">
                        <el-input v-model="addRuleForm.yjfhp" placeholder="已交付貨票" clearable type="text"></el-input>
                       <!-- <el-input-number v-model="addRuleForm.yjfhp" :min="1" :max="100"></el-input-number>-->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="未交付行李票" :label-width="formLabelWidth" prop="wjfxlp">
                        <el-input v-model="addRuleForm.wjfxlp" placeholder="未交付行李票" clearable type="text"></el-input>
                   <!--     <el-input-number v-model="addRuleForm.wjfxlp" :min="1" :max="100"></el-input-number>-->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="未交付包裹票" :label-width="formLabelWidth" prop="wjfbgp">
                        <el-input v-model="addRuleForm.wjfbgp" placeholder="未交付包裹票" clearable type="text"></el-input>
                     <!--   <el-input-number v-model="addRuleForm.wjfbgp" :min="1" :max="100"></el-input-number>-->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="未交付貨票" :label-width="formLabelWidth" prop="wjfhp">
                        <el-input v-model="addRuleForm.wjfhp" placeholder="未交付貨票" clearable type="text"></el-input>
                       <!-- <el-input-number v-model="addRuleForm.wjfhp" :min="1" :max="100"></el-input-number>-->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="記事" :label-width="formLabelWidth" prop="js">
                        <el-input v-model="addRuleForm.js" placeholder="記事" clearable type="text"></el-input>
                    </el-form-item>
                </el-col>

            </el-form>
           


 <div class="TestWord">   
                <el-col >
                <el-button @click="addLine">添加行數</el-button>
               
                </el-col>


                <el-table
                        :data="tableData2"
                        style="width: 100%"
                        :rules="rules">
                    <el-table-column prop="pjzbid" label="票據類型">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.pjzbid" :label-width="formLabelWidth"  clearable >
                                <el-option
                                        v-for="item in pjlxData"
                                        :key="item.id"
                                        :label="item.zdmc"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="yyfh" label="已用符號">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.yyfh" placeholder="已用符號"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="yyqh" label="已用起號">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.yyqh" placeholder="已用起號"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="yyzh" label="已用止號">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.yyzh" placeholder="已用止號"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="yyzs" label="已用張數" >
                        <template slot-scope="scope">
                                <el-input  v-model="scope.row.yyzs" placeholder="已用張數" ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="yyje" label="已用金額">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.yyje" placeholder="已用金額"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wyfh" label="未用符號">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.wyfh" placeholder="未用符號"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wyqh" label="未用起號">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.wyqh" placeholder="未用起號"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wyzh" label="未用止號">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.wyzh" placeholder="未用止號"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wyzs" label="未用張數" >
                        <template slot-scope="scope">
                            <el-input   v-model="scope.row.wyzs" placeholder="未用張數"  ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bookbuytime" label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    v-if="!scope.row.editing"
                                    icon="el-icon-delete"
                                    @click="handleDelete(scope.$index, scope.row)">刪除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 確定、取消按鈕 -->
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="onSubmit('addRuleForm')">確 定</el-button>
                <el-button type="primary" @click="cancel('addRuleForm')">取 消</el-button>
            </div>
        </el-dialog>

添加行數方法：

addLine:function(){
            var newValue = {
                pjzbid: "",
                yyfh: '',
                yyqh: '',
                yyzh:"",//已用止號
                yyzs:"",//已用張數
                yyje:"",//已用金額
                wyfh:"",//未用符號
                wyqh:"",//未用起號
                wyzh:"",//未用止號
                wyzs:"",//未用張數
            };
            //添加新的行數
            this.tableData2.push(newValue);
        },

刪除行數方法：

 handleDelete:function(index,row){//刪除行數
            this.tableData2.splice(index, 1)
        },

編輯回顯的話返回list類型的實體給tableData2 就行