如何在 Nativescript Vue RadDataForm 中实现分组？

Question

想要使用字段分组 Documention 不提供分组主题或示例。大多数示例都使用打字稿。事件 Google 未显示结果。

      <RadDataForm
        ref="dataform"
        :source="customerForm"
        :metadata="customerFormMetadata"
        :groups="groups"
      />

customerFormMetadata: {
        isReadOnly: false,
        commitMode: "Immediate",
        validationMode: "Immediate",
        propertyAnnotations: [
          {
            name: "customer_name_1",
            displayName: "Customer Name",
            index: 0,
            groupName: "Personal",
            editor: "Text"
          },

groups: [
        Object.assign(new PropertyGroup(), {
          name: "Personal",
          collapsible: true,
          collapsed: false
        }),

        Object.assign(new PropertyGroup(), {
          name: "Address",
          collapsible: true,
          collapsed: true
        })
      ],

Answer 1

在使用 Vue 时，分组不需要任何额外的配置，正如核心 docs 中所述，它非常简单。

示例

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <RadDataForm :source="person" :metadata="groupMetaData" />
    </Page>
</template>

<script>
    import Vue from "nativescript-vue";
    import RadDataForm from "nativescript-ui-dataform/vue";
    Vue.use(RadDataForm);

    export default {
        data() {
            return {
                person: {
                    name: "John",
                    age: 23,
                    email: "john@company.com",
                    city: "New York",
                    street: "5th Avenue",
                    streetNumber: 11
                },
                groupMetaData: {
                    propertyAnnotations: [{
                            name: "city",
                            index: 3,
                            groupName: "Address",
                            editor: "Picker",
                            valuesProvider: [
                                "New York",
                                "Washington",
                                "Los Angeles"
                            ]
                        },
                        {
                            name: "street",
                            index: 4,
                            groupName: "Address"
                        },
                        {
                            name: "streetNumber",
                            index: 5,
                            editor: "Number",
                            groupName: "Address"
                        },
                        {
                            name: "age",
                            index: 1,
                            editor: "Number",
                            groupName: "Main Info"
                        },
                        {
                            name: "email",
                            index: 2,
                            editor: "Email",
                            groupName: "Main Info"
                        },
                        {
                            name: "name",
                            index: 0,
                            groupName: "Main Info"
                        }
                    ]
                }
            };
        }
    };
</script>

编辑：

如文档中所述，要使组可折叠，请使用 groupUpdate 事件。

onGroupUpdate: function(args) {
    let nativeGroup = args.group;
    if (args.ios) {
         nativeGroup.collapsible = true;
    } else {
         nativeGroup.setExpandable(true);
    }
}

Updated Playground