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

2023-08-27 05:00| 来源: 网络整理| 查看: 265

文章目录 antd Table表格超出部分隐藏并显示省略号，鼠标悬停时显示出td的所有内容前言一、设置td里面文本内容超出最大长度时隐藏超出部分并显示省略号二、给table中的td设置当鼠标悬停在上面时显示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)=>text} }, ]

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

【本文地址】

公司简介

联系我们