Antd中使用 Table 当内容过长时省略显示三个点鼠标移入显示全部

1.先创建一个工具组件 EllipsisTooltip

import React, { PureComponent } from 'react'

import PropTypes from 'prop-types'

import { Tooltip } from 'antd'

import './ellipsisTooltip.styl'

interface EllipsisTooltipProps {

 title: string

 lineClampNum: number

}

export default class EllipsisTooltip extends PureComponent

 static propTypes = {

   title: PropTypes.string,

   lineClampNum: PropTypes.number

 }

 render () {

   const { title, lineClampNum } = this.props

   return (

{title}

   )

 }

}

2.先创建对应的样式文件EllipsisTooltip.styl

.ellipsisTooltip

 .ant-tooltip

   max-width: 600px !important

 .Tooltip_title

   display: -webkit-box

   overflow: hidden

   text-overflow: ellipsis

   -webkit-box-orient: vertical

3.在文件中引入EllipsisTooltip组件

import EllipsisTooltip from '组件所存放的位置'

{

 title: '站点名称',

 dataIndex: 'siteNames',

 render: (text: any) => (

 )

}

使用组件之前的效果图

image.png

由于内容过多把table撑开外观极其不雅观

使用组件之后的效果图

image.png

本文章由javascript技术分享原创和收集