vue：elementui中el-form之多层数组的表单校验

在Vue中使用Element UI的el-form组件进行多层数组的表单验证时，可以通过使用v-for循环渲染表单项，并在el-form-item上使用:prop属性来指定需要验证的数据路径。

以下是一个简单的例子，演示如何对嵌套数组进行表单验证：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item
      v-for="(item, index) in form.items"
      :key="index"
      :prop="'items.' + index + '.name'"
      :label="'Item ' + (index + 1)"
    >
      <el-input v-model="item.name"></el-input>
    </el-form-item>
    <el-button type="primary" @click="validateForm">提交</el-button>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          items: [
            { name: '' },
            { name: '' }
          ]
        },
        rules: {
          'items.*.name': [
            { required: true, message: '请输入项目名称', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      validateForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert('验证成功');
          } else {
            alert('验证失败');
            return false;
          }
        });
      }
    }
  };
</script>

在这个例子中，form对象包含一个items数组，items数组中的每个对象都有一个name属性。rules对象中定义了一个规则'items.*.name'，它指定了需要验证items数组中每个对象的name属性。

当用户点击提交按钮时，会触发validateForm方法，该方法会执行表单验证。如果验证通过，则可以执行后续操作；如果验证失败，则会停止后续操作并显示错误信息。