除了一些簡單的表單驗證之外，我們還會有一些稍微複雜點的多層級表單的驗證，如下圖所示可點選新增，刪除對陣列進行操作，當點選確定時需要驗證每一條form-item不能為空

其tempalte部分主要程式碼如下所示：

<el-form :model="form" ref="cardForm" :rules="rules" label-position="top" >
		<el-form-item v-for="(item, index) in form.CARD_RIGHTS_LIST" :label="'卡權益' + (index+1)" :key="index" :prop="`CARD_RIGHTS_LIST.${index}.RIGHT_NAME`" :rules="{required: true, message: `請輸入信用卡權益${index+1}`, trigger: ['change']}">
		   <el-col :span="20">
		   		<el-input v-model=" item.RIGHT_NAME" :maxlength="20" placeholder="請輸入信用卡權益" clearable show-word-limit></el-input>
		   </el-col>
		   <el-col :span="4" style="text-align: right;">
		  		<el-button v-if="form.CARD_RIGHTS_LIST.length > 1" icon="el-icon-delete" type="danger" plain @click.prevent="handleRemoveValue(index)">刪除</el-button>
		  	</el-col>
		</el-form-item>
		<el-form-item v-if="form.CARD_RIGHTS_LIST.length < max" class="last">
		   <div class="et-tag__button--add" @click="handleAddValue"><img :src="tagAddIcon" width="16px" height="16px" alt="">新增（最多{{max}}條）</div>
		</el-form-item>
</el-form>
<el-form-item class="product-form__footer last" label="">
    <el-button class="et-button" type="primary" @click="submitForm(form)">確認</el-button>
</el-form-item>
 

data部分程式碼如下：

form:{
          CARD_RIGHTS_LIST:[{ID:'',RIGHT_NAME:''}],
        },

methods部分如下：

//新增form-item
handleAddValue() {
        this.form.CARD_RIGHTS_LIST.push({ID:'',RIGHT_NAME:""})
      },
//刪除form-item
handleRemoveValue(index) {
        this.form.CARD_RIGHTS_LIST.splice(index, 1)
      },
//提交form並且驗證
submitForm() {
        this.$refs.cardForm.validate((valid) => {
          if (valid) {
            this.$message.info("操作成功");
           //此處加入自己需求
        } else {
          //此處加入自己需求
        }
          } else {
            this.$message.info("請完善資訊");
            return ;
          }
        });
      },
 

以上僅展示此處對應的需求程式碼，可直接根據自己的需求進行修改即可實現此功能