Element-UI 表单嵌套表单校验指南

<h2>Element-UI 表单嵌套表单校验指南</h2>
<p>在使用 Element-UI 构建复杂表单时，经常会遇到需要嵌套表单的情况。为了确保数据的完整性，我们需要对嵌套表单进行校验。本文将介绍如何使用自定义校验规则来实现 Element-UI 嵌套表单的校验。</p>
<h3>问题背景</h3>
<p>假设我们有一个表单，用于添加'活动商品'。用户需要选择多个商品，并为每个商品填写一些信息，例如'第一行'描述。我们需要确保用户至少选择了一个商品，并且每个商品的'第一行'描述不为空。</p>
<h3>解决方案</h3>
<p>我们可以使用 Element-UI 提供的自定义校验规则来实现这一目标。</p>
<p><strong>1. 定义表单结构</strong>html<template>  <el-form :model='form' :rules='rules' ref='form'>    <el-form-item label='活动商品：' label-width='100px' prop='publicGoodsList'>      &lt;el-button @click='selectTimeLimitGoods'&gt;选择商品</el-button>      <span style='margin-left:30px'>最多可添加20个</span>      <transition-group name='flip-list' class='box' style='position:relative;' v-if='form.publicGoodsList.length > 0'>        &lt;div v-for='(item, index) in form.publicGoodsList' :key='item.goods_id' draggable='true' class='selectItem'          @dragstart='dragstart(item)' @dragenter='dragenter(item)' @dragend='dragend(item)'&gt;          &lt;i class='el-icon-error' style='position:absolute;right:-5px;top:-5px;cursor: pointer'            @click='delSeletedItem(item.id)'&gt;</i>          <i class='el-icon-rank'></i>          <div class='goodsItem'>            <img :src='item.src' class='goodsImg' alt=''>            <el-form-item :label='`第${index + 1}行：`' :prop='`publicGoodsList.${index}.firstLine`' style='margin-bottom:20px'>              <el-input v-model='item.firstLine' style='width:300px' maxlength='6' placeholder='最多输入6个字'></el-input>            </el-form-item>          </div>        </div>      </transition-group>    </el-form-item>    <el-form-item>      &lt;el-button type='primary' @click='onSubmit'&gt;提交</el-button>    </el-form-item>  </el-form></template></p>
<p><strong>2. 定义数据和校验规则</strong>javascript<script>export default {  data() {    return {      form: {        publicGoodsList: []      },      rules: {        publicGoodsList: [          {            validator: (rule, value, callback) =&gt; {              if (value.length === 0) {                callback(new Error('请选择商品'));              } else {                callback();              }            },            trigger: 'blur'          }        ]      }    };  },  methods: {    onSubmit() {      this.$refs.form.validate((valid) =&gt; {        if (valid) {          // 提交表单数据          console.log(this.form);        } else {          console.log('error submit!');          return false;        }      });    },    selectTimeLimitGoods() {      // 选择商品的逻辑    },    delSeletedItem(id) {      // 删除选中的商品项    },    dragstart(item) {      // 拖拽开始的逻辑    },    dragenter(item) {      // 拖拽进入的逻辑    },    dragend(item) {      // 拖拽结束的逻辑    }  }};&lt;/scrip</p>