_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>)

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

表头实现省略号

未完待续。。


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

查看所有标签

猜你喜欢:

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

程序员第二步

程序员第二步

尹华山 / 人民邮电出版社 / 2013-11 / 45.00元

这本书是写给程序员和项目经理的。作者结合自身的丰富成长历程,通俗易懂地讲述了一名程序员如何才能成为一名优秀的项目经理。内容涉及职业规划、学习方法、自我修炼、团队建设、项目管理等,书中理清了项目管理领域中典型的误区及具有迷惑性的观点,并对项目中的难点问题提出了针对性的解决方法。 全书行文流畅,严谨中带着活泼,理智中透着情感,给读者带来轻松愉快的阅读感受。书中诸多富有创见的观点,让人耳目一新,引......一起来看看 《程序员第二步》 这本书的介绍吧!

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

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具