Vue.js 使用模式使vue表单生成器节可折叠

我正在使用库创建一个表单

问题是我的表单上有116个问题，我想折叠一些问题，让表单更易于用户管理

我的表格有五个部分。因此，我表单中的每个问题在模式中都有

部分

属性。但是，

部分

不是可以修改的表单字段，例如

标签

。这些部分会自动生成标题

除了创建自定义表单字段外，还有什么方法可以使这些部分可以折叠

我想尝试的一种方法是将我的表单分为五个表单，这将允许我在每个表单周围放置一个vue引导折叠元素。比如：

<b-collapse id="collapse1" class="mt-2">
<vue-form-generator  :schema="survey.schema" :options="survey.formOptions" :model="survey.model"></vue-form-generator>
</b-collapse>

但这将再次使提交表格变得更加困难，因为我将不得不拼接所有五个表格的结果

---

这个问题有更简单的解决方法吗？

我最近遇到了同样的问题，这是我找到的唯一解决方法

在schema对象中，向组添加一个

.collapse

类，如下所示：

const schema = {
  groups: [
    {
      styleClasses: 'collapse',
      legend: 'Group title',
      fields: [ ...

在父组件上，添加一个

折叠

方法，并将

onclick

事件附加到

字段集

的

图例

，您可以在vue

挂载的

生命周期挂钩中访问表单，如下所示：

    ...
    methods: {
        collapse(e) {
            const group = e.target.parentElement;
            group.classList.toggle("hide");
        }
    },
    mounted() {
        const collapsableLegends = this.$el.querySelectorAll('.vue-form-generator .collapse legend');
        collapsableLegends.forEach(legend => legend.onclick = this.collapse);
    }
    ...

最后，将

.hide

类添加到css中：

.vue-form-generator .collapse.hide .form-group { display: none }

---

它有点粗糙，但它完成了任务。

我尝试使用Bootstrap Vue中的b-collapse-accordion，并为每个部分生成一个新的Vue表单生成器，但不起作用。你找到另一个解决办法了吗？