_Antd Table 自适应和省略号

栏目: 前端 · 发布时间: 5年前

内容简介:之前写了一篇文章其主要利用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>)

可以看到数据能够自适应并且当页面足够小时显示省略号,但是表头却是折行的实现,能否也实现省略号呢?

表头实现省略号

未完待续。。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

第四次革命

第四次革命

[意]卢西亚诺•弗洛里迪(Luciano Floridi)著 / 王文革 / 浙江人民出版社 / 2016-5 / 64.90元

 随着线上线下大融合以及人工智能的极大发展,人类已经进入超历史时代。在这一时代中,人类终于迎来了继哥白尼革命、达尔文革命、神经科学革命之后自我认知的第四次革命——图灵革命,整个世界正化身为一个信息圈,每个人都生活在云端,人类已不再是信息圈毋庸置疑的主宰。毫无疑问,图灵革命引爆了人工智能重塑整个人类社会的序曲!  那么在人工智能时代,人类如何保证自己最钟爱的财富——“隐私”不被窃取?如何应......一起来看看 《第四次革命》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试