使用 schema 使 vue-form-generator 部分可折叠

Question

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

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

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

Answer 1

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

在模式对象中向组中添加一个

.collapse

类，如下所示：

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

在父组件上添加

collapse

方法，并将

onclick

事件附加到

fieldset

的

legend

，您可以在 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);
    }
    ...

最后添加一个

.hide

类到你的 css 中：

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

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

Answer 2

@Fennec 一些问题。我尝试过，但是

const collapsableLegends = this.$el.querySelectorAll('.vue-form-generator .collapse legend'); console.log(collapsableLegends) 已回答 节点列表 []

为什么？