0

有两个数据源 A , B.
在页面上按一行四列(一条数据是一个Card, 一行四张Card) 如: A1, B1, A2, B2 这样交叉显示?
如下:dataSource={data}, data是A与B合在一起的数据源,item={A1, B1},
但是显示有点问题,能提提供点建议吗

<div style={{ padding: 5 }}>
    <Row gutter={10}>
        <Col span={20}>    
              <List
                 rowKey="id"
                 loading={loading}
                 grid={{ gutter: 10, column: 4}}
                 dataSource={data}
                 renderItem={item =>
                (
                    <div style={{display: 'inline'}}>
                        <List.Item>
                              <Card hoverable style={{ fontSize: 14, }} type={ 'inner' } title={"合约"}>
                                  <font style={{fontSize:"20", color:"#000", paddingLeft: 25}}>{[item[0].symbol,"(", item[0].cn_name,")"]}</font><br/>
                                  <font style={{fontSize:"20", color:"#000", paddingLeft: 25}}>{item[0].expiry}</font>
                            </Card>
                        </List.Item>,
                           <List.Item>
                            <Card hoverable style={{ fontSize: 14}} type={ 'inner' } title={"合约候选"} extra={<Switch defaultChecked onChange={this.onChange(item.symbol)}/>}>
                                  <font style={{fontSize:"20", color:"#000", paddingLeft: 25}}>{[item[1].symbol,"(", item[1].cn_name,")"]}</font><br/>
                                  <font style={{fontSize:"20", color:"#000", paddingLeft: 25}}>{item[1].expiry}</font>
                            </Card>
                        </List.Item>
                    </div>
                )
                }
            />
        </Col>
        
    </Row>        
</div>

页面显示如下, 后面的Card为何与前面的Card不对齐呢, 请各位给点修改建议:
图片描述

2个回答

0

已采纳

如下:dataSource={data}, data是A与B合在一起的数据源,item={A1, B1},
但是显示有点问题,能提提供点建议吗: 
去除<div>的块状显示即可

<div style={{ padding: 5 }}>
    <Row gutter={10}>
        <Col span={20}>    
              <List
                 rowKey="id"
                 loading={loading}
                 grid={{ gutter: 10, column: 4}}
                 dataSource={data}
                 renderItem={item =>
                (
                    <div>
                        <List.Item>
                              <Card hoverable style={{ fontSize: 14, }} type={ 'inner' } title={"合约"}>
                                  <font style={{fontSize:"20", color:"#000", paddingLeft: 25}}>{[item[0].symbol,"(", item[0].cn_name,")"]}</font><br/>
                                  <font style={{fontSize:"20", color:"#000", paddingLeft: 25}}>{item[0].expiry}</font>
                            </Card>
                        </List.Item>,
                           <List.Item>
                            <Card hoverable style={{ fontSize: 14}} type={ 'inner' } title={"合约候选"} extra={<Switch defaultChecked onChange={this.onChange(item.symbol)}/>}>
                                  <font style={{fontSize:"20", color:"#000", paddingLeft: 25}}>{[item[1].symbol,"(", item[1].cn_name,")"]}</font><br/>
                                  <font style={{fontSize:"20", color:"#000", paddingLeft: 25}}>{item[1].expiry}</font>
                            </Card>
                        </List.Item>
                    </div>
                )
                }
            />
        </Col>
        
    </Row>        
</div>

页面显示如下:
图片描述

0

不知道你是用什么来渲染数据的,你可以先处理数据,将A和B两个数据整理成一个新的数据源,再进行渲染。
你应该用的是iView,样式问题你用浏览器调试下吧,看结构代码看不出来什么问题。

撰写答案