vue form表单循坏并校验_vue form list表单

<template>
   <div>
     <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
        <el-form-item label="分类" required>
          <el-row :gutter="20" v-for="(item,index) in ruleForm.list" :key="index">
            <el-col :span="6">
                <el-form-item :prop="'list.'+index+'.name'" :rules="rules.name">
                <el-input type="text" v-model="item.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item :prop="'list.'+index+'.num'" :rules="rules.num">
                <el-input type="text" v-model="item.num"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
       </el-form-item>
     </el-form>
     <el-button type="primary" @click="btn('ruleForm')">提交</el-button>
   </div>
</template>
 
<script>
export default {
  data(){
    return{
      ruleForm:{
          list:[
            {
              name:'',
              num:''
            },
            {
              name:'',
              num:''
            }
          ],
      },
      rules: {
                    name:[{required: true, message: "请选择分类", trigger: "blur"}],
                    num:[{required: true, message: "请选择分类1", trigger: "blur"}],
                },
    }
  },
  methods:{
    btn(formName){
     this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  }
}
</script>
 
<style>
 
</style>