ant design of vue中表格列内容过长,需要截取并且鼠标滑过悬浮显示全部内容
项目开发中,总会遇到点七七八八的问题,ant design中table表格每一列内容过长需要截取,接下来我捋一下首先初始界面展示:因为这行内容过长了,导致我整个表格数据都不能完整的展示出来,如果我只去截取,那剩下的内容我想看,但是看不到呀,所以我就想办法进行截取并且鼠标滑上去的话进行展示全部,完美。代码如下:const columns = [{title: '姓名',dataIndex: 'Nam
·
项目开发中,总会遇到点七七八八的问题,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;
}
更多推荐
已为社区贡献12条内容
所有评论(0)