Column里面有个属性ellipsis可以设置超出隐藏,不过很不好用,并不会显示省略号,所以用下面的方法:
1.

columns:[
  {
     title: '标题',
     dataIndex: 'name',
     width:'20%',
     key: 100,
     slots: { customRender: 'name' },
  },
]

2.

一定要有
.ant-table table{
table-layout: fixed;
} 这一步

<a-table rowKey="id" :dataSource="dataSource" :columns="columns" :pagination="pagination" @change="tableChange">   
   <template #name="{ text }">
       <div class="text-overflow event-name">{{text}}</div>
   </template>
</a-table> 


<style lang="scss">
.ant-table table{
    table-layout: fixed;
}
.text-overflow {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.event-name{
	width:100%;
}
</style>
Logo

前往低代码交流专区

更多推荐