Ant Design Table 单元格文字过长用省略号表示

柔情只为你懂 2023-10-07 21:04 41阅读 0赞

1.先看效果图  
![在这里插入图片描述][2d3d24ebcee44201b2d182b09c225af8.png]  
2.话不多说，直接上代码：

const columns = [
          {
            title: '申请日期',
            align: 'left',
            width: '10%',
            dataIndex: 'SQRQ',
            key: 'SQRQ',
            ellipsis: true,
            render: (value, record) => {
              return (
                  <div title={value} style={ {  whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                    {value}
                  </div>
              );
            }
          },
          {
            title: '主题',
            align: 'center',
            width: '30%',
            dataIndex: 'ZT',
            key: 'ZT',
            render: (value, record) => {
              return (
                <div title={value} style={ {  whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {value}
                </div>
              );
            }
          },
          {
            title: '申请部门',
            align: 'left',
            width: '20%',
            dataIndex: 'SQBM',
            key: 'SQBM',
            render: (value, record) => {
              return (
                <div title={value} style={ {  whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {value}
                </div>
              );
            }
          },
          {
            title: '申请人',
            align: 'left',
            width: '10%',
            dataIndex: 'SQR',
            key: 'SQR',
            render: (value, record) => {
              return (
                <div title={value} style={ {  whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {value}
                </div>
              );
            }
          },
          {
            title: '流程类型',
            align: 'left',
            width: '20%',
            dataIndex: 'LCLX',
            key: 'LCLX',
            render: (value, record) => {
              return (
                <div title={value} style={ {  whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {value}
                </div>
              );
            }
          },
          {
            title: '流程状态',
            align: 'left',
            width: '10%',
            dataIndex: 'LCZT',
            key: 'LCZT',
            render: (value, record) => {
              return (
                <div title={value} style={ {  whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {value}
                </div>
              );
            }
          }];

3.以下关键点要注意：  
![在这里插入图片描述][efcdf189efde4f8eba74c6f9bf63b03b.png]  
**ellipsis设置成true ，那么表格就会变成fixed，不会被内容撑开，会一直按照自己定义的宽度。**

**同时要给要渲染的内容加上这三个关键样式：**  
![在这里插入图片描述][77ca69416d5a4919821ee597da8dd8ca.png]

[2d3d24ebcee44201b2d182b09c225af8.png]: https://img-blog.csdnimg.cn/2d3d24ebcee44201b2d182b09c225af8.png
[efcdf189efde4f8eba74c6f9bf63b03b.png]: https://img-blog.csdnimg.cn/efcdf189efde4f8eba74c6f9bf63b03b.png
[77ca69416d5a4919821ee597da8dd8ca.png]: https://img-blog.csdnimg.cn/77ca69416d5a4919821ee597da8dd8ca.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Ant Design Table 单元格文字过长用省略号表示

1.先看效果图 ![在这里插入图片描述][2d3d24ebcee44201b2d182b09c225af8.png] 2.话不多说，直接上代码： const

柔情只为你懂/ 2023年10月07日 21:04/ 0 赞/ 42 阅读

相关 Ant Design Vue实现a-table表格单元格合并（列/行合并）

列合并这里先写一个最简单的列合并实现：这个合并的效果图只截了表格的一部分，左边是需要展示的数据。数据是后台返回的，但是最后的合计数据需要计算并合并展示。 ![wa

Bertha 。/ 2022年11月30日 12:34/ 0 赞/ 1406 阅读

相关 css单行文本溢出的文字用省略号表示

未添加样式前：代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset

系统管理员/ 2022年10月25日 14:15/ 0 赞/ 243 阅读

相关 table合并单元格

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX2Rv

柔情只为你懂/ 2022年09月04日 04:54/ 0 赞/ 296 阅读

相关 elementui Table合并单元格

<template> <div class=""> <el-table :data="listData"

喜欢ヅ旅行/ 2022年09月03日 08:28/ 0 赞/ 234 阅读

相关 table表格中文本溢出部分用省略号表示

1.table表格想要设置文本溢出操作可按照如下方法 table\{ width: 100%; table-layout:fixed; \} 注意：ta

曾经终败给现在/ 2022年06月08日 04:49/ 0 赞/ 299 阅读

相关 jqgrid单元格内容过长换行

JQGrid表头自动换行的办法：如果table的header部分字段太多或字段文字太长需要自动换行时，可尝试如下css。 <style type="text/css" m

雨点打透心脏的1/2处/ 2022年05月12日 10:16/ 0 赞/ 297 阅读

相关 ant design Table实现可编辑的单元格

需求 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

向右看齐/ 2022年04月03日 10:48/ 0 赞/ 1488 阅读

相关 ant design table td 文字显示过长添加省略号、ant 文字过长时添加tootip提示

方法1： 1. overflow: hidden; 2. text-overflow: ellipsis; 3. display: \-webkit-box; 4.

￡神魔★判官ぃ/ 2021年12月12日 09:35/ 0 赞/ 1325 阅读

相关 ant-design table 分页（tableProps）

From: [https://www.cnblogs.com/crazycode2/p/9704382.html][https_www.cnblogs.com_crazycod

我就是我/ 2021年11月17日 08:58/ 0 赞/ 395 阅读