使用模式使 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中，你可以在 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 }

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