Ant Design Vue table中列超长显示...并加提示语的实例

我就废话不多说了，大家还是直接看代码吧~

.block {
 height: 86px;
 padding: 10px 0;
 box-sizing: border-box;
 background: url('../../../assets/home/bg.png') no-repeat;
 background-size: 100% 100%;
 text-align: center;
 font-size: 20px;

 h3 {
 text-align: center;
 font-size: 18px;
 }

 span {
 font-size: 20px;
 }
}

补充知识：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) => {text},
 }
 ]

其中 oncell（）以下为主要实现。

以上这篇Ant Design Vue table中列超长显示...并加提示语的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。