ant design vue 当中的表格自定义结构超出隐藏的自适应 动态显示省略号

前言

• 我们知道,在ant design vue当中的table组件里面的列表项目,我们一般会使用columns属性定义列表项目,比如下面

export const columns = [
  {
    title:'姓名',
    dataIndex:'name',
    slots:{customRender: 'name'},
    ellipsis: true,
    align: 'center',
  },
  ]

• 其中有一个属性,叫ellipsis这个是设置超出部门是否是省略号的,这个属性很有用,但是如果使用了columns当中的插槽,就会失效,所以这个时候我们必须要手动设置下超出省略显示逗号,但是之前设置的查出省略总是出现这个问题,大概就是这样子,当缩小屏幕的时候,明明可以占据完全,但是依旧显示的是省略号

• 原来的样式(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
• 可以看到,后期省略号会随着列表宽度而进行改变,而不是固定死了这个省略号

        
.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>