vue中form表单点击一次添加一行，以及遇见的坑

最新推荐文章于 2023-04-29 16:20:05 发布

qq_38577700

最新推荐文章于 2023-04-29 16:20:05 发布

阅读量1.4k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/qq_38577700/article/details/107205743

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果图

表单代码

  <template v-for="(item, index) in ruleForm.driver">
                        <el-form-item label="驾驶员姓名:" prop="driverName" style="margin-right: 20px">
                        <!--<el-input v-model="ruleForm.driverName"></el-input>-->
                        <el-autocomplete
                            class="inline-input"
                            v-model="ruleForm.driver[index].driverName"
                            :fetch-suggestions="querySearchDriver"
                            placeholder="请输入驾驶员姓名"
                            @select="handleDriver"
                        ></el-autocomplete>
                    </el-form-item>
                        <el-form-item label="驾驶员身份证号:" prop="driveridCardNo" style="margin-right: 20px">
                            <el-input v-model="ruleForm.driver[index].driveridCardNo"></el-input>
                        </el-form-item>
                        <el-form-item label="从业资格证:" prop="driverLicenseNo" style="margin-right: 20px">
                            <el-input v-model="ruleForm.driver[index].driverLicenseNo"></el-input>
                        </el-form-item>
                        <el-form-item label="驾驶员联系电话:" prop="driverTelephone" style="margin-right: 20px">
                            <el-input v-model="ruleForm.driver[index].driverTelephone"></el-input>
                        </el-form-item>
                        <!-------------------------删除按钮----------------------------------->
                        <el-button v-if="index == 0" type="primary" size="small" @click="addDriver">新 增</el-button>
                        <el-button v-if="index!=0" type="danger" size="small" @click="del(index)">删 除</el-button>
                    </template>

表单定义

                    driver: [{}],//***重点注意***

这里有一个巨大的坑，刚开始表单里面就有人员信息，但是我没有定义，导致出了很多问题，正确的写法是

driver: [{
                        driverName: '',//驾驶员
                        driveridCardNo: '',
                        driverLicenseNo: '',
                        driverTelephone: ''
                    }],

添加、删除代码

 //点击删除驾驶员信息
            del(index) {
                this.ruleForm.driver.splice(index, 1);
            },
            //点击添加驾驶员信息
            addDriver(){
                this.ruleForm.driver.push({
                    driverName: '',
                    driveridCardNo: '',
                    driverLicenseNo: '',
                    driverTelephone: ''
                });
            },