antd中table组件中如何进行换行操作(react中)

简介: antd中table组件中如何进行换行操作(react中)

antd中table组件中如何进行换行操作(react中)


说明

效果

数据

代码


说明



react项目,遇到某字段对应的单元格内需要换行。


最初想偷懒,尝试了在数据中加入回车、使用模板字符串、转义字符,都没用。


最后实现方法是在antd渲染column的对象对应的字段中加入render属性实现。


效果


image.png

数据


image.png

代码


      {
        title: '字段名',
        width: 200,
        align: center,
        render: (str, column, index) => {
          //悬停标题
          let title = str.toString();
          //特殊字段需要添加表格内回车
          if (column === '字段名') {
            let snArray = [];
            //splitE是分割符,修改为自己数据的分隔符,我用的是"$;$"
            snArray = str.split(splitE);
            //悬停标题将分隔符转义显示
            title = snArray.join('\n');
            let br = <br></br>;
            let result = null;
            if (snArray.length >= 2) {
              for (let i = 0; i < snArray.length; i++) {
                if (i === 0) {
                  result = snArray[i];
                } else {
                  result = (
                    <span>
                      {result}
                      {br}
                      {snArray[i]}
                    </span>
                  );
                }
              }
              str = <div>{result}</div>;
            }
          }
          let html = <label title={title}>{str}</label>;
          return html;     
        },
      }
相关文章
|
4天前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
64 0
|
4天前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
136 0
|
4天前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
35 0
|
4天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
48 0
|
4天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
28 0
|
4天前
|
前端开发 JavaScript 架构师
react+typescript+umi+dva+antd
react+typescript+umi+dva+antd
29 0
|
4天前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
18 1
|
4天前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
24 0
|
4天前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理

热门文章

最新文章