ElementUI的的动态增减表单及表单验证

ElementUI的的动态增减表单

1、根据需求：做一个如下图的表单，当只有一列时，无法进行删除操作，且表单必须校验

2、根据ElementUI的动态增减表单项，可得知

• 通过v-for循环可动态增减表单
• 通过:prop="'domains.' + index + '.value'"可进行验证

3、data里的写法

data(){
return {
		ruleformPro: {
        list: [
          {
            fbxBoxNoPro: "",
            boxNumberPro: "",
          },
        ],
      },
}

4、表单代码

<el-form label-position="left"  class="demo-dynamic"  size="mini" :model="ruleformPro"  ref="ruleformPro">
  <el-row :gutter="20" v-for="(item, index) of ruleformPro.list" :key="index">
   <el-col :span="11">
       <el-form-item
            class="rules"
             label-width="100px"
             label="FBA PRO号"
             :prop="'list.' + index + '.fbxBoxNoPro'"
             :rules="{
             required: true,
             message: 'FBA PRO号不能为空',
              trigger: 'change',}" >
        <el-input  maxlength="12" type="text" :placeholder="请输入12位FBA PRO号" v-model="item.fbxBoxNoPro" size="mini">  <el-button slot="suffix" @click="(imageNum = 1), (imagesType = true)"  type="text"  >示例图</el-button >
        </el-input>
      </el-form-item> 
    </el-col>
  <el-col :span="8">
       <el-form-item
           label-width="50px"
           class="rules"
           label="箱数"
           style="margin-left: 20px"
           :prop="'list.' + index + '.boxNumberPro'"
             :rules="{
              required: true,
              message: '箱数不能为空',
              trigger: 'change',}" >
   <el-input
      style="width: 140px"
      size="mini"
      :min="0"
      :max="999"
      onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
      v-model="item.boxNumberPro"
      placeholder="请输入箱子数量"
      >
      </el-input>
    </el-form-item>
   </el-col>
       <el-button
           size="mini"
           type="text"
           style="border-radius: 2px; color: #b93947"
           @click="handleAdd(index)"
           v-if="ruleformPro.list.length == index + 1">
           <i class="el-icon-circle-plus-outline"></i >&nbsp;添加PRO号</el-button>
       <el-button
           style="margin-top: 2px"
           v-if="ruleformPro.list.length != 1"
           type="text"
           class="deleteBox"
           @click="handleDel(index)">
           <i class="el-icon-delete"></i>&nbsp;删除</el-button>
       </el-row>
	</el-form>

5、动态增减

  methods: {
		handleAdd(index) {
         this.ruleformPro.list.push({
             fbxBoxNoPro: "",
             boxNumberPro: "",
      });
    },
    handleDel(index) {
      this.ruleformPro.list.splice(index, 1);
    },
}

动态表单校验

1、在下述动态增减表单中，我们通过v-for和prop="'domains.' + index + '.value'"的方法进行了一种校验
2、多个表单校验

submitFormOrder() {
     let File = false;
     try {
       this.$refs["ruleformPro"].validate((valid) => {
         if (valid) {
           File = true;
         } else {
           throw false;
         }
       });
       this.$refs["refFormInline"].validate((valid) => {
         if (valid) {
           File = true;
         } else {
           throw false;
         }
       });
     } catch (err) {
       File = false;
     }
     if (File) {
       this.onToNext();//调下一个接口
     }
   },

3、判断类型表单校验
：rules="this.THFdata.checked==false?formRules.inwarehousetime:{}"

4、如果要进行比较复杂的校验，再行内无法完成，可以给rules一个属性名，然后去data里校验
例：

data里的校验

还有方法的表单校验，欢迎补充