使用antd的Table的onCell进行展示data嵌套的内容,为何不展示呢?

在使用antd的Table的时候:
我想要使用onCell进行嵌套数据的展示:

import React from 'react';
import { Table } from 'antd';

// 定义 columns
export const columns = [
  {
    title: '名称',
    dataIndex: 'properties.Name',
    key: 'Name',
    onCell: (record: DataType) => ({
      children: record.properties?.Name
    })
  },
  {
    title: '描述',
    dataIndex: 'properties.desc',
    key: 'desc',
    onCell: (record: DataType) => ({
      children: 'record.properties?.desc'
    })
  },
  {
    title: '项目ID',
    dataIndex: 'properties.proj_id',
    key: 'proj_id',
    onCell: (record: DataType) => ({
      children: record.properties?.proj_id
    })
  },
  {
    title: '创建时间',
    dataIndex: 'created_time',
    key: 'created_time'
  },
  {
    title: '更新时间',
    dataIndex: 'last_edited_time',
    key: 'last_edited_time'
  }
];


interface DataType {
  key: string,
  created_time: string,
  last_edited_time: string,
  properties: {
    Name: string,
    desc: string,
    proj_id: string
  }
}

// 示例数据
const dataSource: DataType[] = [
  {
    key: '1',
    created_time: '2024-01-01',
    last_edited_time: '2024-01-02',
    properties: {
      Name: '项目1',
      desc: '这是项目1的描述',
      proj_id: 'GP001'
    }
  },
  {
    key: '2',
    created_time: '2024-02-01',
    last_edited_time: '2024-02-02',
    properties: {
      Name: '项目2',
      desc: '这是项目2的描述',
      proj_id: 'GP002'
    }
  }
];

const App = () => {
  return <Table dataSource={dataSource} columns={columns} />;
};

export default App;

但是结果却不显示:
image.png

阅读 1.5k
1 个回答
✓ 已被采纳

嵌套属性使用数组访问:

const columns = [
  {
    title: "名称",
    dataIndex: ["properties", "Name"],
    key: "Name",
    onCell: (record: DataType) => ({
      children: record.properties?.Name,
    }),
  },
  {
    title: "描述",
    dataIndex: ["properties", "desc"],
    key: "desc",
    onCell: () => ({
      children: "record.properties?.desc",
    }),
  },
  {
    title: "项目ID",
    dataIndex: ["properties", "proj_id"],
    key: "proj_id",
    onCell: (record: DataType) => ({
      children: record.properties?.proj_id,
    }),
  },
  {
    title: "创建时间",
    dataIndex: "created_time",
    key: "created_time",
  },
  {
    title: "更新时间",
    dataIndex: "last_edited_time",
    key: "last_edited_time",
  },
];

参考:ant-design issues #20837

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏