自定义节点插槽node传过来的数据有两层

aa12gq commented 1 year ago

自定义节点插槽node传过来的数据有两层，其中$$data中的数据才是我想要的。附上我的原始数据

{
          "orgType": 1,
            "priority": 99,
            "id": 1,
            "logo": "https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg",
            "name": "集团有限公司",
            "label":"集团有限公司",
            "shortName": "集团",
            "parentName": "集团有限公司",
            "director": "陆鑫",
            "children": [
                {
                    "orgType": 1,
                    "priority": 98,
                    "id": 2,
                    "pid": 1,
                    "logo": "https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg",
                    "name": "信息技术中心",
                    "label": "信息技术中心",
                    "shortName": "信息技术",
                    "parentName": "集团有限公司",
                    "director": "路逸",
                    "children": [
                        {
                            "priority": 5,
                            "id": 7,
                            "pid": 2,
                            "logo": "http://url",
                            "name": "产品研发部",
                            "label" : "产品研发部",
                            "parentName": "信息技术中心",
                            "director": "陆鑫",
                            "children": [
                                {
                                "priority": 5,
                                "id": 7,
                                "pid": 7,
                                "logo": "http://url",
                                "name": "后端",
                                "label" : "后端",
                                "parentName": "信息技术中心",
                                "director": "陆鑫",
                                }
                            ]
                        },
}

然后通过自定义节点插槽的代码

<vue3-tree-org
        :data="data"
        :collapsable="collapsable"
        :label-style="style"
        :clone-node-drag="cloneNodeDrag"
        :horizontal="horizontal"
        :disabled="disabled"
        :scalable="scalable"
        expand="true"
        @on-node-click="nodeClick"
        @on-contextmenu="onMenus"
        >
        <template #default="{ node }" >
                <div class="flex tree-org-node__text node-label">
                    <img :src="node.logo" alt="" class="custom-content w-6 h-6">
                    <div>{{node.label}}</div>
                    <div>{{ node.$$data.logo }}</div>
                </div>
          </template>
    </vue3-tree-org>

以下是插槽node的数据，有两层。其中$$data中的才是我想要的数据，该怎么解决？

{
    "id":1,
    "label":"集团有限公司",
    "expand":false,
    "children":Array[5],
    "$$level":0,
    "$$data":{
        "orgType":1,
        "priority":99,
        "id":1,
        "logo":"https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg",
        "name":"集团有限公司",
        "label":"集团有限公司",
        "shortName":"集团",
        "parentName":"集团有限公司",
        "director":"陆鑫",
        "children":Array[5]
    },
    "$$focused":false,
    "$$root":true
}

而通过node.$$data.logo 获取这个字段的时候会报错，可能是因为还没生成。

sangtian152 commented 1 year ago

初始数据为空导致的报错，判断一下就可以了

@.***

发件人： AA12 发送时间： 2022-12-21 10:02 收件人： sangtian152/vue3-tree-org 抄送： Subscribed 主题： [sangtian152/vue3-tree-org] 自定义节点插槽node传过来的数据有两层 (Issue #13) 自定义节点插槽node传过来的数据有两层，其中$$data中的数据才是我想要的。附上我的原始数据 { "orgType": 1, "priority": 99, "id": 1, "logo": "https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg", "name": "集团有限公司", "label":"集团有限公司", "shortName": "集团", "parentName": "集团有限公司", "director": "陆鑫", "children": [ { "orgType": 1, "priority": 98, "id": 2, "pid": 1, "logo": "https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg", "name": "信息技术中心", "label": "信息技术中心", "shortName": "信息技术", "parentName": "集团有限公司", "director": "路逸", "children": [ { "priority": 5, "id": 7, "pid": 2, "logo": "http://url", "name": "产品研发部", "label" : "产品研发部", "parentName": "信息技术中心", "director": "陆鑫", "children": [ { "priority": 5, "id": 7, "pid": 7, "logo": "http://url", "name": "后端", "label" : "后端", "parentName": "信息技术中心", "director": "陆鑫", } ] }, }

然后通过自定义节点插槽的代码 <vue3-tree-org :data="data" :collapsable="collapsable" :label-style="style" :clone-node-drag="cloneNodeDrag" :horizontal="horizontal" :disabled="disabled" :scalable="scalable" expand="true" @on-node-click="nodeClick" @on-contextmenu="onMenus"

<template #default="{ node }" >

{{node.label}}

{{ node.$$data.logo }}

以下是插槽node的数据，有两层。其中$$data中的才是我想要的数据，该怎么解决？ { "id":1, "label":"集团有限公司", "expand":false, "children":Array[5], "$$level":0, "$$data":{ "orgType":1, "priority":99, "id":1, "logo":"https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg", "name":"集团有限公司", "label":"集团有限公司", "shortName":"集团", "parentName":"集团有限公司", "director":"陆鑫", "children":Array[5] }, "$$focused":false, "$$root":true }

而通过node.$$data.logo 获取这个字段的时候会报错，可能是因为还没生成。 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

aa12gq commented 1 year ago

一开始我是这样做的

 <template #default="{ node }" &gt;
                <div class="flex tree-org-node__text node-label"&gt;
                    <img :src="node.$$data.logo" alt="" class="custom-content w-6 h-6" v-if="node.$$data"&gt;
                    <div&gt;{{node.label}}</div&gt;
                </div&gt;
          </template&gt;

我认为这样是没有问题，但是有时候刷新会白屏不知道咋回事。可能不是代码的原因哈哈。这个项目对我的帮助很大，感谢感谢🙏。已star

------------------ 原始邮件 ------------------ 发件人: "sangtian152/vue3-tree-org" @.>; 发送时间: 2022年12月21日(星期三) 上午10:54 @.>; @.**@.>; 主题: Re: [sangtian152/vue3-tree-org] 自定义节点插槽node传过来的数据有两层 (Issue #13)

初始数据为空导致的报错，判断一下就可以了

@.***

发件人： AA12 发送时间： 2022-12-21 10:02 收件人： sangtian152/vue3-tree-org 抄送： Subscribed 主题： [sangtian152/vue3-tree-org] 自定义节点插槽node传过来的数据有两层 (Issue #13) 自定义节点插槽node传过来的数据有两层，其中$$data中的数据才是我想要的。附上我的原始数据 { "orgType": 1, "priority": 99, "id": 1, "logo": "https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg", "name": "集团有限公司", "label":"集团有限公司", "shortName": "集团", "parentName": "集团有限公司", "director": "陆鑫", "children": [ { "orgType": 1, "priority": 98, "id": 2, "pid": 1, "logo": "https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg", "name": "信息技术中心", "label": "信息技术中心", "shortName": "信息技术", "parentName": "集团有限公司", "director": "路逸", "children": [ { "priority": 5, "id": 7, "pid": 2, "logo": "http://url", "name": "产品研发部", "label" : "产品研发部", "parentName": "信息技术中心", "director": "陆鑫", "children": [ { "priority": 5, "id": 7, "pid": 7, "logo": "http://url", "name": "后端", "label" : "后端", "parentName": "信息技术中心", "director": "陆鑫", } ] }, }

然后通过自定义节点插槽的代码 <vue3-tree-org :data="data" :collapsable="collapsable" :label-style="style" :clone-node-drag="cloneNodeDrag" :horizontal="horizontal" :disabled="disabled" :scalable="scalable" expand="true" @on-node-click="nodeClick" @on-contextmenu="onMenus" > <template #default="{ node }" > <div class="flex tree-org-node__text node-label"> <img :src="node.logo" alt="" class="custom-content w-6 h-6"> <div>{{node.label}}</div> <div>{{ node.$$data.logo }}</div> </div> </template> </vue3-tree-org>

以下是插槽node的数据，有两层。其中$$data中的才是我想要的数据，该怎么解决？ { "id":1, "label":"集团有限公司", "expand":false, "children":Array[5], "$$level":0, "$$data":{ "orgType":1, "priority":99, "id":1, "logo":"https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg", "name":"集团有限公司", "label":"集团有限公司", "shortName":"集团", "parentName":"集团有限公司", "director":"陆鑫", "children":Array[5] }, "$$focused":false, "$$root":true }

而通过node.$$data.logo 获取这个字段的时候会报错，可能是因为还没生成。 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

sangtian152 / vue3-tree-org

自定义节点插槽node传过来的数据有两层 #13