时间戳

首页 > 解决方案 > 使用模式使 vue-form-generator 部分可折叠

vue.js - 使用模式使 vue-form-generator 部分可折叠

问题描述

我正在使用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>

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

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

标签： vue.jsbootstrap-vue

解决方案

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

在模式对象.collapse中向组中添加一个类，如下所示：

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

在父组件上添加一个collapse方法并将一个onclick事件附加到fieldset's legend，您可以在 vuemounted生命周期钩子中访问表单，如下所示：

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

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

推荐阅读