如何在Vue中动态创建el-form-item-group

在Vue.js中，动态创建`el-form-item-group`通常是为了实现动态表单或者需要根据条件渲染不同级别的表单项。`el-form-item-group`是Element UI中的一个组件，用于组织一组相关联的表单项。下面是如何动态创建它的步骤：

1. 定义数据结构：首先，你需要在你的Vue实例的数据里定义一个数组或对象，该数组或对象包含每个`formItemGroup`的配置信息，比如标题、字段列表等。

data() {
  return {
    dynamicFormItems: [
      { title: '组1', items: [{ name: 'item1' }, { name: 'item2' }] },
      { title: '组2', items: [{ name: 'item3' }, { name: 'item4' }] },
    ]
  }
}

2. 使用v-for遍历：在模板中，你可以使用`v-for`指令遍历这些动态数据，并使用`v-if`或`v-show`来控制何时显示这些表单组。

<template>
  <el-form>
    <el-form-item-group v-for="group in dynamicFormItems" :key="group.title">
      <div :title="group.title">{{ group.title }}</div>
      <el-form-item v-for="item in group.items" :key="item.name" :label="item.label" :prop="item.prop">
        <el-input v-model="item.value"></el-input>
      </el-form-item>
    </el-form-item-group>
  </el-form>
</template>

3. 更新数据：如果你想根据某些条件动态添加或删除`formItemGroup`，可以通过Vue实例的方法来操作数据，然后触发视图更新。

methods: {
  addFormItem(title, items) {
    this.dynamicFormItems.push({ title, items });
  },
  removeFormItem(groupTitle) {
    this.dynamicFormItems = this.dynamicFormItems.filter(item => item.title !== groupTitle);
  }
}