Primevue 中的 TreeTable 不显示标签

Question

所以我有这样的树结构：

[
    {
        "key": "0",
        "label": "some label",
        "children": [
            {
                "key": "0-0",
                "label": "some label",
                "data": "ZG9rdW1lbnQxZmlsZTE="
            }
        ]
    },
    {
        "key": "1",
        "label": "some label",
        "children": [
            {
                "key": "1-0",
                "label": "some label",
                "data": "ZG9rdW1lbnQyZGF0YTE="
            }
        ]
    }
]

我将此对象传递给 TreeTable 的值。
TreeTable 显示两行并且可扩展，但它根本不显示标签、键或数据。
只是带有展开按钮的空白行。
有什么建议吗？

Answer 1

TreeNode

组件的

<TreeTable>

元素仅需要

key

和

data

属性，其中

data

是包含每列键值的对象。

涉及“名称”、“大小”和“类型”列的示例

[
    {
        key: '0',
        data: {
            name: 'Applications',
            size: '100kb',
            type: 'Folder'
        },
        children: [
            {
                key: '0-0',
                data: {
                    name: 'Vue',
                    size: '25kb',
                    type: 'Folder'
                },
                children: [
                    {
                        key: '0-0-0',
                        data: {
                            name: 'vue.app',
                            size: '10kb',
                            type: 'Application'
                        }
                    },
                    {
                        key: '0-0-1',
                        data: {
                            name: 'native.app',
                            size: '10kb',
                            type: 'Application'
                        }
                    },
                    {
                        key: '0-0-2',
                        data: {
                            name: 'mobile.app',
                            size: '5kb',
                            type: 'Application'
                        }
                    }
                ]
            },
            {
                key: '0-1',
                data: {
                    name: 'editor.app',
                    size: '25kb',
                    type: 'Application'
                }
            },
            {
                key: '0-2',
                data: {
                    name: 'settings.app',
                    size: '50kb',
                    type: 'Application'
                }
            }
        ]
    }
]

文档在解释这一点方面确实很糟糕，并且包含的代码片段也没有显示正确的格式，但是单击链接查看codesandbox或stackblitz中的示例将最终显示正在使用的正确格式。

codesandbox 示例

Answer 2

有点题外话，但我还是要记得指出

expander

，它对我有帮助！