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()以下为主要实现。

  • 相关阅读:
    模板
    总结
    关于log方线段树
    [ICPC2014 WF]Sensor Network
    背包问题总结
    NOIP2020微信步数
    NOIP2020移球游戏
    CF643D Bearish Fanpages
    CF685C Optimal Point
    论恋爱对学习的促进作用
  • 原文地址:https://www.cnblogs.com/notchangeworld/p/11549130.html
Copyright © 2011-2022 走看看