{searchList.length !== 0 && ( <> <div style={{ fontSize: 15, color: '#9f9f9f', padding: '5px 6px' }}> 已查询到{searchList.length}条数据 </div> <div> <Checkbox.Group value={selectedList} onChange={()=>{console.log(1111);}}> <Space direction="vertical" style={{ width: '100%', backgroundColor: '#fff' }}> {searchList.map((item) => ( <Checkbox value={item.organizationId} key={item.organizationId}> <div style={{ marginLeft: 5 }}> <div className={styles.positionName}> {item.name} {mark === 'personnel' && item.positionName && <>({item.positionName})</>} </div> <div className={styles.orgName} style={{ display: mark === 'position' ? '' : 'none' }} > {item.organizationName} </div> </div> </Checkbox> ))} </Space> </Checkbox.Group> </div> </> )} 这是我写的一个公共组件,但是这个组件的onChange方法在一个tab页能执行,再另外一个tab页执行不了
时间: 2023-02-09 21:28:21 浏览: 101
I'm sorry, but the text you provided is incomplete and it is not clear what you are asking for. Could you please provide more context or clarify your question so that I can better assist you?
相关问题
在ftl模板引擎中 <#list data as saleData> <tr style="font-size: ${(saleData.team?contains('汇总') || saleData.team?contains('汇总'))?string('28px', '26px')}; color: ${(saleData.dailySalesAmount == 0)?string("#f3f3f3", '')}; background-color: ${(saleData.dailySalesAmount == 0)?string('#4472C4', '')} ${((saleData.dailySalesAmount > 0) && (saleData.dailySalesAmount < 10000))?string('#D9E1F2', '')} ${(saleData.saleArea=='CA部门' && saleData.dailySalesAmount>0 && saleData.dailySalesAmount<50000)?string('#D9E1F2', '')} ${(saleData.team?contains('汇总')?string('#f3f3f3', ''))}; font-weight: bold"> <td>${(saleData.team)!""}</td> <td>${(saleData.name)!""}</td> <td>${(saleData.tenDailySalesAmount)!""}</td> <td>${(saleData.twelveDailySalesAmount)!""}</td> <td>${(saleData.fifteenDailySalesAmount)!""}</td> <td>${(saleData.dailySalesAmount)!""}</td> <td>${(saleData.orderCount!"")}</td> </tr> </#list> 这个代码可以怎么优化
可以将一些重复判断条件的部分提取出来,减少代码重复和冗余,同时可以使用内置函数和变量简化代码:
```
<#list data as saleData>
<#assign isSummary = saleData.team?contains('汇总')>
<#assign salesAmount = saleData.dailySalesAmount>
<#assign bgColor = (salesAmount == 0)?string('#f3f3f3', '')>
<#assign fontColor = (salesAmount == 0)?'#4472C4' : ((salesAmount > 0) && (salesAmount < 10000))? '#D9E1F2' : (saleData.saleArea == 'CA部门' && salesAmount > 0 && salesAmount < 50000)? '#D9E1F2' : ''>
<#assign fontSize = isSummary?string('28px', '26px')>
<#assign fontWeight = isSummary?string('bold', '')>
<tr style="font-size: ${fontSize}; color: ${fontColor}; background-color: ${bgColor}; font-weight: ${fontWeight}">
<td>${saleData.team!""}</td>
<td>${saleData.name!""}</td>
<td>${saleData.tenDailySalesAmount!""}</td>
<td>${saleData.twelveDailySalesAmount!""}</td>
<td>${saleData.fifteenDailySalesAmount!""}</td>
<td>${saleData.dailySalesAmount!""}</td>
<td>${saleData.orderCount!""}</td>
</tr>
</#list>
```
在这里,我们使用了内置函数 `contains()` 来判断字符串是否包含某个子串,使用 `assign` 定义变量来避免重复计算。同时,我们使用了三目运算符 `?` 简化了代码,使得整个代码更加简洁易懂。
<StatisticCard.Group direction="row"> <StatisticCard statistic={{ title: '订单编号', value: detailData?.orderUuid || '-', groupSeparator: '' }} /> <StatisticCard.Divider type="vertical" /> <StatisticCard statistic={{ title: '下单时间', value: detailData?.createTime || '-' }} /> <StatisticCard.Divider type="vertical" /> <StatisticCard statistic={{ title: '订单状态', value: DDZT_ENUM?.[detailData?.orderStatus]?.text || '-', suffix: detailData?.orderType ? ( <span style={{ color: 'red', fontSize: 14 }}> ({DDLX_ENUM?.[detailData?.orderType]?.text}) </span> ) : null }} chart={ detailData?.orderStatus === '2' ? ( <Button style={{ marginTop: 10 }}>发货</Button> ) : detailData?.orderStatus === '3' ? ( <span style={{ fontSize: 13 }}>7天内不确认收货,系统自动收货</span> ) : null } chartPlacement="right" /> </StatisticCard.Group>使title和数值展示在一行
这段代码使用了 Ant Design 的 StatisticCard 组件来展示数据,其中每个 StatisticCard 组件都代表一个数据项,包含了 title、value 等属性。
为了让 title 和 value 展示在同一行,这里使用了 StatisticCard.Group 组件,并将其 direction 属性设置为 "row",表示子组件按行排列。
具体来说,每个 StatisticCard 组件中的 title 和 value 都分别设置在一个 span 标签中,这样它们就能够在同一行展示。而使用 StatisticCard.Divider 组件则可以在 title 和 value 之间添加一个竖向的分隔线。
需要注意的是,这段代码中的 detailData、DDZT_ENUM、DDLX_ENUM 等变量都是在其他地方定义的,这里只是将它们用作数据渲染的参数。同时,还使用了一些条件判断和三目运算符来控制组件的展示和样式。
阅读全文