react-開發(fā)經(jīng)驗(yàn)分享-Table表格組件里自定義表格td內(nèi)容換行

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',
       },
  ]

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容