vue + element-ui 点击动态添加form表单项
需求: 点击按钮新增经纬度项html:外层的form自行添加 这里展示核心带代码因为只要两个input框 所以只用了两个item项 根据需求更改<divv-for="(item, index) in ruleForm.networkCardArray":key="item.key"...
·
需求: 点击按钮新增经纬度项
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)
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)