好资源导航 » 文章资讯 » Ant Design Vue table中列超长显示...并加提示语的实例

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

2023-07-12 23:50:02 80

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


{{index+1}}
//处理超长生成...,并加上提示文字代码



{{record.groupName}}

{{record.groupName}}


.block{
height:86px;
padding:10px0;
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-designtable中的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的数据显示部分以及...,当鼠标放上去显示全部

代码实现：

constwebColumns=[
{
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（）以下为主要实现。

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

返回顶部
514930285
czq8825@qq.com

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

出勤状况总览

管理人员出勤状况

施工人员出勤状况

特种设备人员出勤状况

随机推荐

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

出勤状况总览

管理人员出勤状况

施工人员出勤状况

特种设备人员出勤状况

热门推荐

随机推荐