nativescript-vue - 如何在 Nativescript-vue 中以编程方式折叠 raddataform“组”

Question

我正在尝试使用 NativeScript-Vue 的 RadDataForm 来开发一个相对较长的表单。

我的表单元素正在通过 json 以编程方式定义和分组。为了用户体验，我想让组以最小化/折叠状态开始。

此功能的 NativeScript-Vue 文档非常稀少。Angular 文档更深入，所以我去那里寻求帮助，但是单击“折叠”的 API 参考会导致来自此页面的 404 。

我正在从 Playground 运行它以使用以下代码测试功能：

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar">
            <ActionItem icon="font://&#xf07a;" class="fa" />
            <ActionItem icon="font://\uf07a" class="fa" />
        </ActionBar>
        <RadDataForm :source="person" :metadata="groupMetaData"
            @groupUpdate="onGroupUpdate" />
    </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: "[e-mail]",
                    city: "New York",
                    street: "5th Avenue",
                    streetNumber: 11
                },
                groupMetaData: {
                    // propertyGroup: [{
                    //         "Address": {
                    //             'collapsed' = true,
                    //     },
                    //     // {
                    //     //     "Main Info": 'collapsed',
                    //     }
                    // ],
                        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"
                            }
                        ]
                    }
                };
            },
            methods: {
                onGroupUpdate: function(args) {
                    let nativeGroup = args.group;

                    if (args.ios) {
                        nativeGroup.collapsible = true;
                        // nativeGroup.collapsed = true;
                    } else {
                        nativeGroup.setExpandable(true);
                        // nativeGroup.collapsed;
                        // nativeGroup.collapsed(true);
                        // nativeGroup.collapsed;
                    }
                    // console.log(JSON.stringify(nativeGroup));
                }
            }
        };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }
</style>

我的假设是在 OnGroupUpdate 方法中解决这个问题，但我没有到达我需要的地方（你可以看到一些被注释掉的尝试）。

目标是使用最小化组加载此视图，以便用户可以扩展他/他希望按顺序处理的不同表单组。

游乐场链接： https ://play.nativescript.org/?id=XLKFoC&template=play-vue&v=14

谢谢你的帮助

标签： nativescript-vue

Answer 1

我认为你真正需要的是 nativeGroup.setIsExpanded(false);

exports.onGroupUpdate = (args) => {
  if (app.ios) {
    let nativeGroup = args.group;
    nativeGroup.collapsible = true;
  } else {
    let nativeGroup = args.group;
    nativeGroup.setExpandable(true);
    //in this example i only expand one group.
    if (args.groupName !== "SERVICE INFORMATION") {
        nativeGroup.setIsExpanded(false)
    }
  }

}