1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > ant design of vue中表格列内容过长 需要截取并且鼠标滑过悬浮显示全部内容

ant design of vue中表格列内容过长 需要截取并且鼠标滑过悬浮显示全部内容

时间:2023-03-29 06:17:31

相关推荐

ant design of vue中表格列内容过长 需要截取并且鼠标滑过悬浮显示全部内容

项目开发中,总会遇到点七七八八的问题,ant design中table表格每一列内容过长需要截取,接下来我捋一下

首先初始界面展示:

因为这行内容过长了,导致我整个表格数据都不能完整的展示出来,如果我只去截取,那剩下的内容我想看,但是看不到呀,所以我就想办法进行截取并且鼠标滑上去的话进行展示全部,完美。

代码如下:

const columns = [{title: '姓名',dataIndex: 'Name',key: 'name',width: 120,scopedSlots: {customRender: 'titleShow' },},]

相当于给表格中需要操作的一列定义了具名插槽。

接下来我们需要操作:

<table 动态获取表格数据的代码><div class="LeaveOut" :title="text" slot="titleShow" slot-scope="text, record"><div :style="{textAlign:'left'}">{{text}}</div> //鼠标滑上去显示全部内容 </div></a-table>

设置完之后,还需要对样式进行操作

.LeaveOut{overflow: hidden;/* 隐藏溢出*/height: 25px; width: 53px;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。