zoukankan      html  css  js  c++  java
  • ant-design table 中的td 数据过多显示部分,鼠标放上去显示全部

    第一:表格中的数据自动换行,所以表格中的行高不一致

    目标实现:防止自动换行,

    代码实现://*** 是主要实现

    :global {
        .ant-table-tbody > tr > td,
        .ant-table-thead > tr > th {
          height: 62px;
          white-space:nowrap;//***
          overflow: auto;//***
        }
        .ant-table-thead > tr > th {
          background: #2db7f5;
          white-space:nowrap;//***
          overflow: auto;//***
        }

    第二:上述目标实现,但是全部显示出来

    目标实现:指定td的数据显示部分以及...,当鼠标放上去显示全部

    代码实现:

    const webColumns = [
        {
          title: 'IP',
          dataIndex: 'srcIp',
          key: 'srcIp',
          '15%',
        },{
          title: '描述',
          dataIndex: 'msg',
          key: 'msg',
          //'8%',
          onCell: ()=>{
            return {
              style:{
                maxWidth:260,
                overflow:'hidden',
                whiteSpace:'nowrap',
                textOverflow:'ellipsis',
                cursor:'pointer',
              }
            }
          },
          render: (text) => <span placement="topLeft" title={text}>{text}</span>,
        }
      ]

    其中  oncell()以下为主要实现。

  • 相关阅读:
    使用excel2003中的solver解决最优化问题
    图的邻接表存储方式的建立
    LINUX下使用VI
    LINUX下基本命令
    应用程序各对象创建的顺序
    zookeeper常遇错误详解
    MapReduce_partition
    MapReduce_TopK
    MapReduce_MaxValue
    Hbase用java基础操作
  • 原文地址:https://www.cnblogs.com/notchangeworld/p/11549130.html
Copyright © 2011-2022 走看看