element-ui form 动态数组验证必填项

一个小渣渣۶

已于 2022-07-27 15:47:04 修改

阅读量855

点赞数

CC 4.0 BY-SA版权

分类专栏： js vue 文章标签： vue.js 前端 javascript elementui

于 2022-07-27 15:40:51 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43526066/article/details/126016008

vue 同时被 2 个专栏收录

15 篇文章

订阅专栏

6 篇文章

订阅专栏

此博客展示了如何使用Element UI构建一个带有动态生成输入框的表单，实现活动名称的验证。通过v-for遍历生成多个输入项，并设置相应的验证规则，以便实时提交和重置表单数据。

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

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-row>
      <el-col :span="6" v-for="(item,index) in ruleForm.dataList" :key="index">
        <el-form-item label="活动名称" :prop="'dataList.'+index+'.name'" :rules="rules.name">
          <el-input v-model="item.name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
        	dataList:[{
        		name:''
        },{
        		name:''
        }]
          },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>