使用pro-components遇到的问题

使用ProTable组件进行数据渲染遇到的复杂数据结构如何处理?

参照官方文档:ProComponents官网

javascript 复制代码
  {
      title: 'sku信息',
      ellipsis: true,
      search: false,
      width: 160,
      dataIndex: 'skus',
      render: (_, record: any, dom) => (
        <Space>
          {record.skus.map((item) => (
            <List>
              <List.Item key={item.goods_sku_id}>
                <List.Item.Meta
                  avatar={
                  <Image width={50} height={50} src={item.spu_img_head} />
                  }
                  title={
                    <>
                      <a style={{ marginRight: 15 }}>{item.spu_name}</a>
                      {
                        item.sku_attrs.map((attr, index1) => (
                          <Tag key={attr.value}>
                            {attr.value}
                          </Tag>
                        ))
                      }
                    </>
                  }
                  description={
                    <>
                      <Text type="secondary" ellipsis={true} copyable style={{ fontSize: 12, display: 'block' }}>SKU名称:{item.sku_name}</Text>
                      <Text type="secondary" ellipsis={true} copyable style={{ fontSize: 12, display: 'block' }}>SKU数量:{item.num}</Text>
                      <Text type="secondary" ellipsis={true} copyable style={{ fontSize: 12, display: 'block' }}>SKU价格:{item.price}</Text>
                    </>
                  }
                />
              </List.Item>
            </List>
          ))}
        </Space>
      )
    },
相关推荐
前端snow3 分钟前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
難釋懷8 分钟前
Shell脚本-for循环语法结构
前端·chrome
全栈老李技术面试9 分钟前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog12 分钟前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
Stella252114 分钟前
10前端项目----商品详情页/滚轮行为
前端
DolphinScheduler社区17 分钟前
白鲸开源WhaleStudio与崖山数据库管理系统YashanDB完成产品兼容互认证
数据库·开源·认证·崖山数据库·白鲸开源
阑梦清川24 分钟前
AI超级智能体项目教程(二)---后端项目初始化(设计knif4j接口文档的使用)
java·前端·数据库
hotlinhao24 分钟前
ThinkPHP6模型中多组条件逻辑或Or查询的使用
linux·服务器·数据库
jack xu131 分钟前
高频面试题:如何保证数据库和es数据一致性
java·大数据·数据库·mysql·elasticsearch
Pocker_Spades_A35 分钟前
金仓数据库征文-政务领域国产化数据库更替:金仓 KingbaseES 应用实践
数据库·政务·金仓数据库 2025 征文·数据库平替用金仓