You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

LWC树形网格无法渲染数据 求技术支持

问题:LWC树形网格视图无法渲染Apex获取的数据

我正在开发一个LWC树形网格视图组件,已从Apex控制器获取数据,但数据无法在用户界面渲染。需要实现顶层父节点在上、子节点层级展示的树形视图。

JS代码

import { LightningElement, track, wire, api} from 'lwc';
import getDomainsList from "@salesforce/apex/DataDomainTreeViewController.getDomainsList";

export default class Datadomaintreeview extends LightningElement {
    dataDomainsval;
    error;
    @track expandedRows = [];
    @track gridColumns = [{
        type:'url',
        fieldName:'name',
        label:'Data Domain Name',
        typeAttributes: {label: { fieldName: 'name' }, target: '_blank'}
    }];

    @track gridData;
    @track gridData2;

    connectedCallback(){
        //var tempDomains = JSON.parse(JSON.stringify([{"Id":"a1b04000000tEQgAAM","Name":"Shared Services","Data_Domains__r":[{"Parent_Data_Domain__c":"a1b04000000tEQgAAM","Id":"a1b04000000tERPAA2","Name":"Human Resources","Data_Domains__r":[{"Parent_Data_Domain__c":"a1b04000000tERPAA2","Id":"a1b04000000tERyAAM","Name":"Employee Data"}]},{"Parent_Data_Domain__c":"a1b04000000tEQgAAM","Id":"a1b04000000tER1AAM","Name":"Manufacturing"},{"Parent_Data_Domain__c":"a1b04000000tEQgAAM","Id":"a1b04000000tEQnAAM","Name":"Finance"},{"Parent_Data_Domain__c":"a1b04000000tEQgAAM","Id":"a1b04000000tEQUAA2","Name":"Supply Chain"}]}]));
        getDomainsList().then(result =>{
            var tempDomains = [];
            for(var i=0;i<result.length;i++){
                if(result[i]?.Parent_Data_Domain__c == undefined){
                    console.log('this is the root list',result[i]);
                   tempDomains = JSON.parse(JSON.stringify(result[i]));
                   var arr = [];
                   for(let j in tempDomains){
                    console.log('>>>>>>>>>>>>>>',tempDomains);
                             console.log('this is the result',result);
                        var newDomain = tempDomains.Data_Domains__r;
                        delete tempDomains.Data_Domains__r;
                        if(newDomain){
                            for(let x in newDomain){
                                console.log('every new domain value',newDomain[x]);
                                tempDomains._children = newDomain[x];
                            }
                        }
                    }
                    
                }
            }
            tempDomains = '['+JSON.stringify(tempDomains)+']';
            console.log('temp json static data',this.data2);
            console.log('my dasta',tempDomains);
            console.log('type of both STAT',JSON.stringify(this.data2));
            console.log('type of both SDYN',JSON.stringify(tempDomains));
            // var obj = JSON.parse(json.stringify(tempDomains));
            // console.log('temp data',obj);
            this.gridData= tempDomains;
        })
         
    }
}

HTML代码

<template>
    <lightning-card title = "Data Domains">
        <lightning-tree-grid
            columns = {gridColumns}
            max-column-width="1500"
            data={gridData}
            key-field="name"
            hide-checkbox-column>
        </lightning-tree-grid>
    </lightning-card>
</template>

Apex控制器代码

public class DataDomainTreeViewController {
    @AuraEnabled
    public static List<Data_Domain__c> getDomainsList(){
        List<Data_Domain__c> domainList = [SELECT id,Name,Parent_Data_Domain__c,(SELECT ID,Name FROM Data_Domains__r) FROM Data_Domain__c];
        if(!domainList.isEmpty()){
            return domainList;
        }
        return null;
    }
}

内容的提问来源于stack exchange,提问作者Prasanna Kumar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.24 21:57:36