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

        相关文章
        相关标签/搜索
        高手论坛免费精选资料