Question

我正在尝试通过NativeScript-Vue利用RadDataForm开发相对较长的表格。

我的表单元素通过json进行编程定义和分组。我希望这些组以最小/折叠状态开始，以提供用户体验。

此功能的NativeScript-Vue文档非常稀疏。 Angular文档更深入，因此我去那里寻求帮助，但是单击“折叠的” API参考，会得到this page中的404。

我正在操场上运行它，以使用以下代码测试功能：

<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: "john@company.com",
                    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

感谢您的帮助

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

}

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

1 个答案: