Antd vue table超出隐藏显示省略号_column里面的超出省略号a-table

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

columns:[
  {
     title: '标题',
     dataIndex: 'name',
     width:'20%',
     key: 100,
     slots: { customRender: 'name' },
  },
]
1
2
3
4
5
6
7
8
9

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20