Vue3如何使用el-form-item-group

在Vue3中，`el-form-item-group`是Element UI库中的一个组件，用于组织和分组表单元素，通常用于展示复杂的表单结构，如嵌套的字段。`el-form-item`用于单独的表单项，而`el-form-item-group`则可以包含多个`el-form-item`。下面是一个基本的使用示例：

1. 引入依赖：
首先确保已经安装了Element UI，如果还没有，可以通过npm或yarn安装：

   npm install element-ui
   // 或者
   yarn add element-ui

2. 在Vue组件中导入并使用：

   <template>
     <div>
       <el-form :model="form">
         <!-- 使用el-form-item-group -->
         <el-form-item-group label="分组标题1" :rules="rules1">
           <el-form-item prop="item1.1">...</el-form-item>
           <el-form-item prop="item1.2">...</el-form-item>
         </el-form-item-group>
         <el-form-item-group label="分组标题2">
           <el-form-item prop="item2.1">...</el-form-item>
           <!-- 可以省略label，它会显示为第一个子元素的标签 -->
           <el-form-item>...</el-form-item>
         </el-form-item-group>
       </el-form>
     </div>
   </template>

   <script>
   import { ElFormItem, ElFormItemGroup } from 'element-ui';

   export default {
     components: {
       ElFormItem,
       ElFormItemGroup
     },
     data() {
       return {
         form: {}, // 表单数据模型
         rules1: { ... }, // 分组1对应的验证规则
       };
     },
   };
   </script>

3. 验证规则：
`rules1`属性可以用来设置每个`el-form-item-group`内的验证规则，例如：

   rules1: {
     item1: {
       required: true,
       message: '请输入内容',
       trigger: 'blur' // 触发验证事件
     },
     item2: [
       { required: true, message: '不能为空', trigger: 'blur' },
       { min: 5, message: '长度必须大于5', trigger: 'blur' }
     ]
   }