动态增减表单项-element ui

最新推荐文章于 2024-11-08 11:33:32 发布

温柔晨光

最新推荐文章于 2024-11-08 11:33:32 发布

阅读量560

点赞数

CC 4.0 BY-SA版权

分类专栏： element ui 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/moonla3/article/details/123341440

本文介绍了如何在Vue.js应用中结合Element UI库，实现动态增删表单项的功能。通过JavaScript操作DOM，结合Vue的数据绑定，可以方便地创建和移除表单字段，以满足动态表单的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <el-form :model="form" ref="form" label-width="100px" class="demo-dynamic">
      <el-form-item
        prop="email"
        label="邮箱"
        :rules="[
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
          },
        ]"
      >
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item
        v-for="(domain, index) in form.domains"
        :label="'域名' + index"
        :key="domain.key"
        :prop="'domains.' + index + '.value'"
        :rules="{
          required: true,
          message: '域名不能为空',
          trigger: 'blur',
        }"
      >
        <el-input v-model="domain.value"></el-input>
        <el-button @click.prevent="removeDomain(domain)">删除</el-button>
      </el-for