qq_43033533 2022-07-23 17:05 采纳率: 66.7%
浏览 15
已结题

树型控件渲染列表出错

树形控渲染列表报错

接口返回的数据类型、格式


[
    {
        "id": 1,
        "glid": "45cc91d9-12a2-4ef4-9498-7af3c15d242b",
        "pGlid": "0",
        "level": 0,
        "name": "LOWER LEVEL",
        "externalId": "0",
        "groupname": ""
    },
    {
        "id": 2,
        "glid": "e72dff18-f954-49a7-8f69-8c3c85d6d86a",
        "pGlid": "45cc91d9-12a2-4ef4-9498-7af3c15d242b",
        "level": 1,
        "name": "墙",
        "externalId": "0",
        "groupname": "墙"
    }
]

代码处理方式

组件

<div class="modelFoolTree">
            <el-card class="box-card">
                <el-tree :data="modelFloorTree" show-checkbox default-expand-all node-key="id" ref="tree"
                    highlight-current :props="defaultProps" :indent="indent">
                </el-tree>
            </el-card>
        

data

 modelFloorTree: this.configJson.modelsTree,
            defaultProps: {
                children: '',
                label: 'name'
            }

结果(没有层级)

img

传入glid报错(树结构无渲染了)

     modelFloorTree: this.configJson.modelsTree,
            defaultProps: {
                children: 'glid',
                label: 'name'
            }

img

想要渲染的样子

img

请大家指点下如何处理这个数据

  • 写回答

0条回答 默认 最新

    报告相同问题?

    问题事件

    • 已结题 (查看结题原因) 7月24日
    • 创建了问题 7月23日