Lightning DataTable 无法展示多层级数据的解决

import { LightningElement, track, wire } from 'lwc';
import getCaseList from '@salesforce/apex/DataTableExampleController.getCaseList';
const COLUMNS = [
    {label: 'Case Number', fieldName: 'CaseNumber', type: 'text'},
    {label: 'Account Name', fieldName: 'Account.Name', type: 'text'},
    {label: 'Priority', fieldName: 'Priority', type: 'text'},
    {label: 'Status', fieldName: 'Status', type: 'text'}
];
export default class DataTableExample2 extends LightningElement {
    columns = COLUMNS;
    @track datas;

    @wire(getCaseList)
    wiredCaseList({ error, data }) {
        if(data) {
            this.datas = data;
        } else if(error) {
            //TODO
            console.log(JSON.stringify(error));
        }
    }
}

上面代码里的 fieldName: 'Account.Name',这种点的方法的字段,在Lightning DataTable无法显示,可以通过例如将字段名改为AccountName,然后在js里将值重新分配进去

import { LightningElement, track, wire } from 'lwc';
import getCaseList from '@salesforce/apex/DataTableExampleController.getCaseList';
const COLUMNS = [
    {label: 'Case Number', fieldName: 'CaseNumber', type: 'text'},
    {label: 'Account Name', fieldName: 'AccountName', type: 'text'},
    {label: 'Priority', fieldName: 'Priority', type: 'text'},
    {label: 'Status', fieldName: 'Status', type: 'text'}
];
export default class DataTableExample2 extends LightningElement {
    columns = COLUMNS;
    @track datas;

    @wire(getCaseList)
    wiredCaseList({ error, data }) {
        if(data){
            let resultList = [];
            let obj;
            data.forEach(item => {
                obj.assign({},item);//复制
                obj.AccountName = item.Account.name;
            });
            resultList.push(obj);
            this.datas = resultList;
        }else if(error){

        }else{
           
        }
    }
}

 

posted @ 2023-05-26 09:39  ahotang  阅读(42)  评论(0)    收藏  举报