内容简介:之前写了一篇文章其主要利用x滚动条,让数据完全展现。但是有的需求是数据一屏展示不滚动,当屏幕足够小时,单元格内容用省略号代替,然后用Tooltip展示内容
前言
之前写了一篇文章 Antd Table组件 配置规范
其主要利用x滚动条,让数据完全展现。
但是有的需求是数据一屏展示不滚动,当屏幕足够小时,单元格内容用省略号代替,然后用Tooltip展示内容
参考:
https://github.com/ant-design/ant-design/issues/5753#issuecomment-451896473
https://github.com/ant-design/ant-design/issues/5753#issuecomment-457319869
实现方案
先创建一个 工具 组件 EllipsisTooltip
import React from 'react' import { Tooltip } from 'antd'; class EllipsisTooltip extends React.Component { state = { visible: false } handleVisibleChange = (visible) => { if (this.container.clientWidth < this.container.scrollWidth) { this.setState({ visible: visible }) } } render () { const style = { textOverflow: 'ellipsis', overflow: 'hidden', ...this.props.style } return ( <Tooltip visible={this.state.visible} onVisibleChange={this.handleVisibleChange} title={this.props.title}> <div ref={node => this.container = node} style={style}>{this.props.children}</div> </Tooltip> ) } } export default EllipsisTooltip
当内容不能完全展示时,用省略号代替,鼠标移过去利用tooltip显示完整内容
然后在columns这样使用
title: 'xxx', dataIndex: 'name', // 当表格不能完全展示时,该列大小至少是100px onCell: () => ({ style: { whiteSpace: 'nowrap', maxWidth: 100, } }), render: (text)=> (<EllipsisTooltip title={text}>{text}</EllipsisTooltip>)
可以看到数据能够自适应并且当页面足够小时显示省略号,但是表头却是折行的实现,能否也实现省略号呢?
表头实现省略号
未完待续。。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 2017 年领域自适应发展回顾
- _前端-溢出文本显示省略号
- 多行文本加省略号的处理方法
- Echarts Label 过长展示省略号
- CSS 基础:单行与多行省略号
- 浅谈移动端过长文本溢出显示省略号的实现方案
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。