循环校验el-form表单项

img


我这个el-input可以自定义增添，外层用v-for控制的。我想让el-form的rule来校验每一个el-input。怎么写啊，

参照这个模式进行循环校验el-form表单项


<el-form label-position="right" :model="loginInfo" :inline="true" label-width="55px" :rules="rules">
            <div v-for="(item,index) in loginInfo.dataList" :key="index">
                <el-form-item label="用户名" :rules="rules.username" :prop="`dataList.${index}.username`">
                    <el-input v-model="loginInfo.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" :rules="rules.password" :prop="`dataList.${index}.password`">
                    <el-input v-model="loginInfo.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" >取消</el-button>
                    <el-button type="primary" @click="doLogin">登录</el-button>
                </el-form-item>
            </div>
        </el-form>



   data(){
        return{
            loginInfo: {
                dataList: [{username:'', password:''}]
            },
            rules:{
                username:[{required: true, message: '请输入用户名', trigger: 'blur' }],
                password:[{required: true, message: '请输入用户名', trigger: 'blur' }],
            },
     }
  }



 this.$refs.loginInfo[index].validate((valid)=>{
                if(valid){
                    alert('提交成功')
                }
            })

思路：动态表单通常使用el-form结合el-table来实现
要点：表单进行验证时候，prop指定需要校验的属性必须是表单属性中对应的对象的属性名称

<template>
  <div class="about">
    <el-form ref="dataForm"
              :model="dataForm"
              label-position="left"
              label-width="auto"
              style="width: 600px">

      <el-table :data="dataForm.emailArray">
        <el-table-column>
          <template slot-scope="scope">
            <span v-if="dataForm.emailArray.length > 1"
                  class="remove-email"
                  @click="removeEmail(scope.$index)">删除</span>
            <div v-if="scope.$index !== 0"
                 class="line" />
            <el-form-item label="邮箱："
                          :prop="'emailArray.' + scope.$index + '.email'"
                          :rules="rules.email"
                          class="keyword">
              <el-input v-model.trim="scope.row.email"
                        style="width: 400px"
                        placeholder="请输入邮箱" />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>

      <el-row>
        <el-col :span="24"
                class="add-email">
          <i class="el-icon-plus"
             @click="addEmail">新增邮箱</i>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    const validateEmail = (rule, value, callback) => {
      const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

      if (!reg.test(value)) {
        callback(new Error('邮箱格式不正确!'))
      } else {
        callback()
      }
    }

    return {
      emailArray: [],
      dataForm: {
        emailArray: [
          { email: '' }
        ]
      },
      rules: {
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { required: true, validator: validateEmail, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 新增
    addEmail () {
      this.dataForm.emailArray.push({ email: '' })
    },
    // 移除
    removeEmail (pos) {
      this.dataForm.emailArray.splice(pos, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.about {
  padding-top: 30px;
  text-align: center;
  color: #2c3e50;
}
</style>

<style lang="scss" scoped>
::v-deep .el-table {
  &::before {
    height: 0px;
  }
  .cell {
    position: relative;
  }
  .el-table__header-wrapper {
    display: none;
  }
  .el-table__cell {
    padding: 0px;
  }
  td {
    border: none !important;
  }
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background: #FFFFFF !important;
}
::v-deep .el-form-item__label-wrap {
  margin-left: 0px !important;
}
::v-deep .keyword .el-form-item__content {
  display: flex;
  align-items: center;
  .el-input {
    width: 400px !important;
  }
}
::v-deep .el-form-item__label {
  font-weight: 700;
}
::v-deep .el-textarea__inner {
  resize: none;
  &::-webkit-scrollbar {
    width: 0 !important
  }
}

.line {
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, #2B2D32 0%, #2B2D32 50%, transparent 51%);
  background-size: 14px 1px;
  background-repeat: repeat-x;
  margin-bottom: 18px;
}
.remove-email {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #409eff;
  cursor: pointer;
  z-index: 10;
}
</style>

效果

img