使用模式使 vue-form-generator 部分可折叠答案

【问题标题】：Using schema to make a vue-form-generator section collapse-able使用模式使 vue-form-generator 部分可折叠
【发布时间】：2020-06-06 17:27:27
【问题描述】：

我正在使用vue-form-generator 库来创建表单。

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

我的表格有五个部分。因此，我表单中的每个问题在架构中都有 section 属性。但是，section 部分不是您可以修改的label 等表单字段。这些部分会自动生成为您的标题。

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

我正在考虑尝试的一种方法是将我的表单拆分为五个表单，这将允许我在每个表单周围放置一个 vue-bootstrap 折叠元素。比如：

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

但这又会使提交表单变得更加困难，因为我必须拼接所有五个表单的结果。

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

【问题讨论】：

我尝试使用 Bootstrap Vue 中的 b-collapse-accordion 并为每个部分生成一个新的 vue-form-generator，但它不起作用。您找到其他解决方案了吗？

标签： vue.js bootstrap-vue

【解决方案1】：

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

在架构对象中添加一个.collapse 类到组中，如下所示：

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

在父组件上添加一个collapse方法，并在fieldset的legend上附加一个onclick事件，你可以在vue的mounted生命周期钩子中访问表单，如下所示：

    ...
    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);
    }
    ...

最后在你的 CSS 中添加一个 .hide 类：

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

这有点hacky，但它可以完成工作。

【讨论】：