Vue-formulate Group item可折叠/切换折叠

基础概念

Vue-formulate 是一个用于构建表单的 Vue.js 插件，它提供了丰富的表单控件和验证功能。Group 组件允许你将多个表单项组合在一起，而 item 则是 Group 中的具体表单项。可折叠/切换折叠功能指的是用户可以点击某个按钮或标签来展开或收起某个表单项或表单组。

优势

用户体验：用户可以根据需要展开或收起表单部分，减少不必要的信息展示，提升用户体验。
界面整洁：通过折叠功能，可以在有限的界面空间内展示更多内容，保持界面的整洁和美观。
动态交互：可折叠功能增加了表单的动态交互性，使用户操作更加灵活。

类型

手动折叠：用户通过点击按钮或标签手动展开或收起表单项。
自动折叠：根据某些条件（如表单验证状态）自动展开或收起表单项。

应用场景

复杂表单：当表单包含大量字段时，可以使用折叠功能将不常用的字段隐藏起来，只在需要时显示。
条件表单：某些表单项可能只在特定条件下才需要显示，通过折叠功能可以实现这种条件显示。
分步表单：将表单分成多个步骤，每个步骤使用折叠功能来展示，引导用户逐步完成表单填写。

实现方法

以下是一个简单的示例代码，展示如何在 Vue-formulate 中实现 Group item 的可折叠/切换折叠功能：

<template>
  <div>
    <formulate-group v-model="formData" :key="formData">
      <formulate-group-item
        v-for="(item, index) in items"
        :key="index"
        :label="item.label"
        :collapsed="item.collapsed"
        @toggle-collapse="toggleCollapse(index)"
      >
        <formulate-input v-model="item.value"></formulate-input>
      </formulate-group-item>
    </formulate-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {},
      items: [
        { label: 'Item 1', value: '', collapsed: false },
        { label: 'Item 2', value: '', collapsed: true },
        { label: 'Item 3', value: '', collapsed: false }
      ]
    };
  },
  methods: {
    toggleCollapse(index) {
      this.items[index].collapsed = !this.items[index].collapsed;
    }
  }
};
</script>