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;     
        },
      }
相关文章
|
3月前
|
数据采集 前端开发 API
React - 实现一个基于 Antd 的数值范围组件
这篇文章介绍了如何实现一个基于Ant Design的数值范围组件,以满足数据采集流程中表单数据的录入需求。文章详细说明了组件的设计思路、代码结构、使用方式以及参数说明,并提供了效果预览和注意事项。组件支持只能输入数字,具有自定义表单控件封装的特点,同时支持所有InputNumber属性,以适应不同业务场景的需求。
102 0
React - 实现一个基于 Antd 的数值范围组件
|
1月前
|
缓存 前端开发 JavaScript
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
🌟蒋星熠Jaxonic,前端探索者。专注React Hooks深度实践,从原理到实战,分享状态管理、性能优化与自定义Hook精髓。助力开发者掌握函数组件的无限可能,共赴技术星辰大海!
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
|
2月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
93 2
|
3月前
|
前端开发 安全 数据安全/隐私保护
React - 实现一个基于 Antd 的密码强度校验组件
这篇文章介绍了一个基于 Nest 和 Umi 技术栈的个人项目开发中用到的密码强度校验组件的开发过程。作者首先在网上找不到满意的资料,于是决定自己开发该组件。文章依次介绍了效果预览、组件思想和组件开发的过程,并提供了相应的代码示例。最后,作者展示了实际效果,并提供了仓库地址供参考。
React - 实现一个基于 Antd 的密码强度校验组件
|
6月前
|
缓存 前端开发 数据安全/隐私保护
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
265 68
|
6月前
|
缓存 前端开发 Java
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
240 67
|
6月前
|
前端开发 JavaScript 安全
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
264 62
|
8月前
|
前端开发 JavaScript
除了使用Route组件,React Router还有其他方式处理404错误页面吗
除了使用Route组件,React Router还有其他方式处理404错误页面吗
225 58
|
8月前
|
前端开发
React 中高阶组件的原理是什么?
React 中高阶组件的原理是什么?
221 57
|
8月前
|
前端开发 开发者
除了函数组件和类组件,React 还有其他创建组件的方式吗?
除了函数组件和类组件,React 还有其他创建组件的方式吗?
175 57