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

  • 相关阅读:
    八数码
    狂神说笔记——多线程05
    狂神说笔记——Java SE基础03
    从零开始的卷积神经网络
    深度学习与机器学习的区别
    模型的评估与选择
    经验风险VS风险函数
    常见的损失函数
    Erlang聊天室
    uniapp APP端 清除缓存
  • 原文地址:https://www.cnblogs.com/notchangeworld/p/11549130.html
Copyright © 2011-2022 走看看