Ant Design库Table组件超长字符串不换行解决

淩亂°似流年 2023-06-08 10:57 94阅读 0赞

## 问题： ##

columns中已经定义了宽度，可是没有作用

{
          title: <div className={styles.tableTeCenter}>作废编号</div>,
          dataIndex: 'legalFileCode',
          width: 280,
          render: val => <div className={styles.tableCenter}>{val || '--'}</div>,
          className: styles.tableCenter,
        },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70][]

## 解决： ##

加折断样式处理

{
          title: <div className={styles.tableTeCenter}>作废编号</div>,
          dataIndex: 'legalFileCode',
          width: 280,
          render: val => <div className={styles.tableCenter} style={
       { wordWrap: 'break-word', wordBreak: 'break-word' }}>{val || '--'}</div>,
          className: styles.tableCenter,
        },

完美解决：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70]: /images/20230531/25e40982db8349baab6511c9267e2ced.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70 1]: /images/20230531/05b9c6536d7042e886cdcdd075d9329f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，94人围观）

还没有评论，来说两句吧...

相关阅读

相关 React安装ant design组件库，并使用

ant design是一个很棒的组件库，官方地址：[快速上手 - Ant Design][- Ant Design] 但是如何在React里面用起来，好像并不是很顺畅，没有像

浅浅的花香味﹌/ 2023年10月14日 13:44/ 0 赞/ 218 阅读

相关 Table表格（antd-design组件库）简单使用

1.Table表格展示行列数据。 2.何时使用 ·当有大量结构化的数据需要展现时； ·当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。组件代码来

刺骨的言语ヽ痛彻心扉/ 2023年10月13日 10:03/ 0 赞/ 155 阅读

相关 React组件_Ant Design

Ant Design of React `antd` 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 ![water

拼搏现实的明天。/ 2023年06月11日 15:21/ 0 赞/ 34 阅读

相关 Ant Design库Table组件超长字符串不换行解决

问题： columns中已经定义了宽度，可是没有作用 { title: <div className={styles.tableTeCent

淩亂°似流年/ 2023年06月08日 10:57/ 0 赞/ 95 阅读

相关 React组件库Ant Design的安装与使用

一、什么是 Ant Design 1、[Ant Design][] 提炼自企业级中后台产品的交互语言和视觉风格 2、Ant Design 使用 TypeScript 构

野性酷女/ 2023年06月02日 09:16/ 0 赞/ 62 阅读

相关 Ant Design Table 组件自定义 render 的作用域，解决找不到 this 问题。

Ant Design Table 组件自定义 render 的作用域，解决找不到 this 问题。今天在使用 Ant Design Table 组件时遇到了一个问题，当我自

忘是亡心i/ 2022年11月21日 15:16/ 0 赞/ 357 阅读

相关 ant-design Table表格添加合计行

文章目录 1：方式一：（比较好维护：推荐） 1：效果图 2：排序数字 3：table 4：data定义

小灰灰/ 2022年11月06日 14:50/ 0 赞/ 1624 阅读

相关 element table 组件内容换行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEy

分手后的思念是犯贱/ 2022年10月17日 04:07/ 0 赞/ 561 阅读

相关 ant-design vue组件库使用后总结

1、form组件自定义校验 template: <a-form-item fieldDecoratorId="articleNum

川长思鸟来/ 2022年08月29日 10:24/ 0 赞/ 486 阅读

相关 ant-design vue组件库使用后总结

1、form组件自定义校验 template: <a-form-item fieldDecoratorId="articleNum

骑猪看日落/ 2022年01月26日 09:11/ 0 赞/ 445 阅读