美文网首页菜鸟前端工程师
react-开发经验分享-Table表格组件里自定义表格td内容

react-开发经验分享-Table表格组件里自定义表格td内容

作者: Mr柳上原 | 来源:发表于2019-01-10 15:07 被阅读1次

    ant框架里,Table表格组件里自定义表格td内容换行的方法
    在Table表格里,无法像普通原生html一样直接在标签内使用‘br’或换行符使表格内容换行
    必须在表格组件的columns方法里对需要换行的地方使用render自定义换行,
    使用方法如下:

    columns = [
      {
           title: '驻场',
              // 子单元格
              children: [
                  {
                     title: '驻场姓名',
                     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: '驻场电话',
                        width: 160,
                        dataIndex: 'phoneData',
                        key: 'phoneData',
                        align: 'center',
                   },
               ],
               align: 'center',
           },
      ]
    
    

    相关文章

      网友评论

        本文标题:react-开发经验分享-Table表格组件里自定义表格td内容

        本文链接:https://www.haomeiwen.com/subject/anrarqtx.html