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

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)
            }
        },

# elementui
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue