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

Posted 2023-04-13

【中文标题】如何在 Nativescript-vue 中以编程方式折叠 raddataform“组”

【英文标题】：How to programmatically collapse raddataform "Groups" in Nativescript-vue

【发布时间】：2020-03-27 09:51:29

【问题描述】：

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

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

此功能的 NativeScript-Vue 文档非常少。 Angular 文档更深入，所以我去那里寻求帮助，但单击“折叠”API 参考会导致来自this page 的 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

感谢您的帮助

【参考方案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)