前言
- 我们知道,在ant design vue当中的table组件里面的列表项目,我们一般会使用
columns
属性定义列表项目,比如下面
export const columns = [
{
title:'姓名',
dataIndex:'name',
slots:{customRender: 'name'},
ellipsis: true,
align: 'center',
},
]
- 其中有一个属性,叫
ellipsis
这个是设置超出部门是否是省略号的,这个属性很有用,但是如果使用了columns
当中的插槽,就会失效,所以这个时候我们必须要手动设置下超出省略显示逗号,但是之前设置的查出省略总是出现这个问题,大概就是这样子,当缩小屏幕的时候,明明可以占据完全,但是依旧显示的是省略号
![](https://i-blog.csdnimg.cn/blog_migrate/cd396330b2eab6dd0ba9a34bc946422c.gif)
- 原来的样式(less书写)和html结构代码,其实后面改进主要是改进css样式,html结构没有改动
.demo {
//描述
&_table{
&_item-wrapper{
display: flex;
//头像
&_avatar{
flex-shrink: 0;
background-color: red;
vertical-align: middle;
margin-right: 7px;
}
&_info{
display: flex;
flex-direction: column;
text-align: left;
&>div{
max-width: 90px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
&_detail{
color:#FE9136;
margin-left: 10px;
cursor:pointer;
}
}
}
<div class="demo_table_item-wrapper">
<a-avatar class="demo_table_item-wrapper_avatar" shape="square" size="large">超</a-avatar>
<div class="demo_table_item-wrapper_info">
<div class="demo_table_item-wrapper_info_name">
<a-tooltip placement="top">
<template #title>
<span>超人</span>
</template>
<span>超人</span>
</a-tooltip>
</div>
<div class="demo_table_item-wrapper_info_other">
<a-tooltip placement="top">
<template #title>
<span>冬瓜超人冬瓜超人冬瓜超人</span>
</template>
<span>冬瓜超人冬瓜超人冬瓜超人</span>
</a-tooltip>
</div>
</div>
</div>
改造和改造后的代码
- 主要是设置了
max-width
- 可以看到,后期省略号会随着列表宽度而进行改变,而不是固定死了这个省略号
![](https://i-blog.csdnimg.cn/blog_migrate/20c42b0a0c933acb2c8356202be92fc5.gif)
.demo {
//数据展示
&_table{
&_item-wrapper{
display: flex;
//关键部分
width: 100%;
//头像
&_avatar{
flex-shrink: 0;
background-color: red;
vertical-align: middle;
margin-right: 7px;
}
&_info{
display: flex;
flex-flow: column nowrap;
text-align: left;
//关键部分
width: calc(100% - 40px);//减去头像的宽度,有头像就减去,没有就设为100%
&>div{
&>span{
display: inline-block;
//关键部分,不可以设置width,要设置max-width
max-width: 95%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
}
&_detail{
color:#FE9136;
margin-left: 10px;
cursor:pointer;
}
}
}
<div class="demo_table_item-wrapper">
<a-avatar class="demo_table_item-wrapper_avatar" shape="square" size="large" >{{record?.userName?.slice(0,1)}}</a-avatar>
<div class="demo_table_item-wrapper_info">
<div class="demo_table_item-wrapper_info_name">
<a-tooltip placement="top">
<template #title>
<span>{{ record?.userName }}</span>
</template>
<span>{{ record?.userName }}</span>
</a-tooltip>
</div>
<div class="demo_table_item-wrapper_info_other">
<a-tooltip placement="top">
<template #title>
<span>@{{ record?.corpName }}</span>
</template>
<span>@{{ record?.corpName }}</span>
</a-tooltip>
</div>
</div>
</div>