背景:使用ant design 中的組件table 它的使用方式是翼馆,通過(guò)columns變量來(lái)指定標(biāo)題字段,從而去渲染列表數(shù)據(jù)嫉父。
遇見(jiàn)的問(wèn)題:其中一個(gè)字段返回的值是一串字符串(以逗號(hào)拼接的字符串)搀菩,需要前端頁(yè)面通過(guò)逗號(hào)去分割巫糙,換行展示犹菱。
解決方案:通過(guò)將字符串轉(zhuǎn)中的逗號(hào)轉(zhuǎn)化為換行符(<br></br>)
代碼展示:? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?columns?=?[
????{
??????title:?(<div><div>風(fēng)險(xiǎn)名單</div><div>類型</div></div>),
??????dataIndex:?'risktype',
??????align:?'center',
??????render:?(text,?record)?=>?{
????????if(text)?{//判斷有沒(méi)有值
??????????if(text.indexOf(',')?>?-1)?{//判斷是否是以逗號(hào)拼接的多個(gè)值
????????????let?br?=?<br></br>//聲明一個(gè)換行標(biāo)簽
????????????let?array?=?text.split(',')//將字符串轉(zhuǎn)化為數(shù)組
????????????let?result?=?''
????????????array.map((item)?=>?{
??????????????result?=?<span>{result}{item}{br}</span>//每循環(huán)一次拼接一次result,這里必須使用花括號(hào){result}這樣拾稳,才可以將第一次循環(huán)的值進(jìn)行記錄并拼接到第二次循環(huán)上,很神奇@巴选7玫谩!
????????????})
????????????return?<span>{result}</span>//將循環(huán)完之后的最終結(jié)果返回
??????????}
??????????return?<span>{text}</span>
????????}
??????},
????},
]