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

淩亂°似流年 2023-06-08 10:57 10阅读 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 条评论，10人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 ant-design-vue Table组件去掉自带分页器

<a-table :columns="columns" :data-source="data" :pagination

雨点打透心脏的1/2处/ 2022年12月23日 00:47/ 0 赞/ 235 阅读

相关 ant-design-vue upload组件onchange成功不回调

[官方文档地址][Link 1] 现象 Upload组件的onchange方法只有uploading状态会回调，上传成功和失败不会回调。官方给了很多解释，但是都是针

一时失言乱红尘/ 2022年12月21日 12:59/ 0 赞/ 192 阅读

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

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

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

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

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

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

相关 element table 组件内容换行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEy

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

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

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

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

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

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

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