Antd vue table超出隐藏显示省略号
Column里面有个属性ellipsis可以设置超出隐藏,不过很不好用,并不会显示省略号,所以用下面的方法:1.columns:[{title: '标题',dataIndex: 'name',width:'20%',key: 100,slots: { customRender: 'name' },},]2.一定要有.ant-table table{table-layout: fixed;}这一步&
·
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>
更多推荐
已为社区贡献14条内容
所有评论(0)