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

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

你可能感兴趣的:(js,vue,vue.js,前端,javascript,elementui)