element动态表单验证一

 

 

 

<template>

  <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic bg-white pg-20" style="width: 30%;">

    <el-form-item>

      <el-button @click="addDomain" type="primary">新增域名</el-button>

    </el-form-item>

   <div class=""

    v-for="(domain, index) in dynamicValidateForm.domains"

    :key="index"

    >

    <el-form-item

      prop="email"

      label="邮箱"

      :prop="'domains.' + index + '.email'"

      :rules="[

        { required: true, message: '请输入邮箱地址', trigger: 'blur' },

      ]"

    >

    校验：{{'domains.' + index + '.value'}}

    <el-input v-model="domain.email"></el-input>

    </el-form-item>

    <el-form-item

      label="域名"

      :prop="'domains.' + index + '.value'"

      :rules="{

        required: true, message: '域名不能为空', trigger: 'blur'

      }"

    >

    校验：{{'domains.' + index + '.value'}}

    <el-input v-model="domain.value"></el-input>

      <el-button @click.prevent="removeDomain(domain)">删除</el-button>

    </el-form-item>

   </div>

  <el-form-item>

    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>

    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>

  </el-form-item>

</el-form>

  </template>

<script>

  export default {

    data() {

      return {

        skuList:[{

            "goodsId": "29",

            "skuId": "8",

            "skuSn": "3333",

            "bundleNumber": null,

            "name": null,

            "price": 1.00,

            "stock": 2,

            "quantity": 3,

            "warehouseLocationNumber": null,

            "lockedStock": null,

            "weight": null,

            "width": 2.00,

            "thickness": 1.00,

            "length": 3.00,

            "picUrl": "https://oss.qiegang.com/banner/brands/20241129/4ea5f7ff2a2d4e9a966e6eff348892bd.jpg",

            "warehouse": "切钢上海宝山仓",

            "outboundFeels": null,

            "skuIndate": null

            }],

        dynamicValidateForm: {

          domains: [{

            value: '',

            email:""

          }],

        }

      };

    },

    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();

      },

      removeDomain(item) {

        var index = this.dynamicValidateForm.domains.indexOf(item)

        if (index !== -1) {

          this.dynamicValidateForm.domains.splice(index, 1)

        }

      },

      addDomain() {

        this.dynamicValidateForm.domains.push({

            value: '',

            email:""

           });

      }

    }

  }

</script>