Author:Mr.柳上原
- 付出不亞于任何的努力
- 愿我們所有的努力,都不會(huì)被生活辜負(fù)
- 不忘初心,方得始終
ant框架里,Table表格組件里自定義表格td內(nèi)容換行的方法
在Table表格里,無法像普通原生html一樣直接在標(biāo)簽內(nèi)使用‘br’或換行符使表格內(nèi)容換行
必須在表格組件的columns方法里對(duì)需要換行的地方使用render自定義換行,
使用方法如下:
columns = [
{
title: '駐場(chǎng)',
// 子單元格
children: [
{
title: '駐場(chǎng)姓名',
width: 120,
dataIndex: 'nameData',
key: 'nameData',
align: 'center',
// 自定義表格換行方法
render: (text, record) => {
let snArray = [];
snArray = text.split("-");
let br = <br></br>;
let result = null;
if (snArray.length < 2) {
return text;
}
for (let i = 0; i < snArray.length; i++) {
if (i == 0) {
result = snArray[i];
} else {
result = <span>{result}{br}{snArray[i]}</span>;
}
}
return <div>{result}</div>;
}
},
{
title: '駐場(chǎng)電話',
width: 160,
dataIndex: 'phoneData',
key: 'phoneData',
align: 'center',
},
],
align: 'center',
},
]