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',
      width:'15%',
    },{
      title: '描述',
      dataIndex: 'msg',
      key: 'msg',
      //width:'8%',
      onCell: ()=>{
        return {
          style:{
            maxWidth:260,
            overflow:'hidden',
            whiteSpace:'nowrap',
            textOverflow:'ellipsis',
            cursor:'pointer',
          }
        }
      },
      render: (text) => <span placement="topLeft" title={text}>{text}</span>,
    }
  ]

其中  oncell（）以下為主要實現。