vue + element-ui 点击动态添加form表单项

需求： 点击按钮新增经纬度项

html：

  外层的form自行添加 这里展示核心带代码

  因为只要两个input框 所以只用了两个item项 根据需求更改

                      <div
                        v-for="(item, index) in ruleForm.networkCardArray"
                        :key="item.key"
                        class="dynamic-box"
                    >
                        <el-form-item
                            label="经度"
                            :prop="'networkCardArray.' + index + '.ksLong'"
                            :rules="{
                                required: true,
                                message: '经度不能为空',
                                trigger: 'blur',
                            }"
                    >
                            <el-input
                                v-model="item.ksLong"
                                type="number"
                                placeholder="数字类型"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            label="纬度"
                            :prop="'networkCardArray.' + index + '.ksLat'"
                            :rules="[
                                {
                                    required: true,
                                    message: '纬度不能为空',
                                    trigger: 'blur',
                                },
                            ]"
                        >
                            <el-input
                                v-model="item.ksLat"
                                type="number"
                                placeholder="数字类型"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <i
                                v-show="ruleForm.networkCardArray.length > 2"
                                class="el-icon-delete"
                                @click="removeDomain(item, index)"
                            ></i>
                        </el-form-item>
                    </div>
                    <el-form-item style="display: block; text-align: center">
                        <el-button @click="addJWItem" type="primary"
                            >新增可用区域经纬度</el-button
                        ></el-form-item >

 data:

 js:

        点击新增

 // 新增经纬度表单项
        addJWItem() {
            this.ruleForm.networkCardArray.push({
                ksLat: '',
                ksLong: '',
            })
        },

        点击删除 

 // 点击删除经纬度项
        removeDomain(item, index) {
            const itemList = this.ruleForm.networkCardArray.indexOf(item)
            if (itemList !== -1) {
                this.ruleForm.networkCardArray.splice(index, 1)
            }
        },