React 表格列colums中条件判断渲染显示
colums中的render方法中传参及条件判断
const columns = [
{
field: 'ip',
name: 'Controller IP',
render: (ip,row,index) => {//ip:当前列的值,row:当前行所有值对象,index:当前位置
let sdnStr = row.sdn.trim().toUpperCase();//小写转大写
if (sdnStr == 'AAA') {
return <EuiLink href={`https://${ip}:8084/axxxx`} target="_blank">{ip}</EuiLink>
} else if (sdnStr == 'BBB'){
return <EuiLink href={`https://${ip}:8443/bxxx`} target="_blank">{ip}</EuiLink>
} else if (sdnStr == 'CCC'){
return <EuiLink href={`https://${ip}:8082/cxxx`} target="_blank">{ip}</EuiLink>
} else {
return <div>{ip}</div>;
}
}
},
]
Html代码显示、EuiToolTip
if (is_show_tips) {
return (
<EuiToolTip position="right" content={
<span>
<div
dangerouslySetInnerHTML={{ __html: tips }}>
</div>
</span>
} >
<div
dangerouslySetInnerHTML={{ __html: div_str }}>
</div>
</EuiToolTip>
);
} else {
return (
<div dangerouslySetInnerHTML={{ __html: div_str }}>
</div>
);
}