动态增减表单项-element ui

最新推荐文章于 2024-04-29 04:19:57 发布

温柔晨光

最新推荐文章于 2024-04-29 04:19:57 发布

阅读量493

点赞数

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

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

版权

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

摘要由CSDN通过智能技术生成

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