使用pro-components遇到的问题

最新推荐文章于 2024-06-11 09:42:34 发布

不要秃头啊啊

最新推荐文章于 2024-06-11 09:42:34 发布

阅读量633

点赞数 2

文章标签：前端数据库

本文链接：https://blog.csdn.net/m0_60676278/article/details/133858297

版权

使用ProTable组件进行数据渲染遇到的复杂数据结构如何处理？
参照官方文档：ProComponents官网

  {
      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>
      )
    },