antd Table表格超出部分隐藏并显示省略号，鼠标悬停时显示出td的所有内容

最新推荐文章于 2023-04-20 18:11:52 发布

佩奇是个dog

最新推荐文章于 2023-04-20 18:11:52 发布

阅读量1.7w

点赞数 17

CC 4.0 BY-SA版权

文章标签： css reactjs css3 javascript

本文链接：https://blog.csdn.net/weixin_45738401/article/details/117257647

本文介绍了如何使用antdTable实现表格中内容超出时隐藏并显示省略号，同时在鼠标悬停时通过Tooltip显示完整的td内容。主要涉及onCell属性设置样式以及Tooltip组件的应用，提供了具体的代码示例和效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd Table表格超出部分隐藏并显示省略号，鼠标悬停时显示出td的所有内容

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、设置td里面文本内容超出最大长度时隐藏超出部分并显示省略号

设置文本可接受的最大长度，文本超出部分隐藏起来，并设置省略号

const columns = [
    {
      title: '收付性质',
      dataIndex: 'name',
      fixed: 'left',
      width: 100,
      onCell: ()=>{
        return {
          style:{
            maxWidth: 100,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            cursor: 'pointer'
          }
        }
      },
    },
    ]

效果如下图：

onCell：设置单元格属性

二、给table中的td设置当鼠标悬停在上面时显示td的所有内容

 const columns = [
    {
      title: '本方单位',
      dataIndex: 'age',
      width: 100,
      render: (text)=><Tooltip placement="topLeft" title={text}>{text}</Tooltip>
    },
    ]

效果如下图：

Tooltip：文字提示；
placement 气泡框位置，可选 top ，left， right， bottom， topLeft， topRight ，bottomLeft， bottomRight ，leftTop ，leftBottom ，rightTop ，rightBottom