antd-vue table列内容过长,以tooltip样式显示
效果图:实现方法:<a-table:columns="columns"xxxxxxxxxx><span slot="requestUri" slot-scope="text, record"><a-tooltip><template slot="title">{{ record.requestUri }}</template>
·
效果图:
实现方法:
<a-table
:columns="columns"
xxxxx
xxxxx>
<span slot="requestUri" slot-scope="text, record">
<a-tooltip>
<template slot="title">
{{ record.requestUri }}
</template>
<div class="multi-ellipsis">{{ record.requestUri }}</div>
</a-tooltip>
</span>
</a-table>
data:
columns:[
{
title: '请求URI',
dataIndex: 'requestUri',
scopedSlots: { customRender: 'requestUri' }
}
]
.multi-ellipsis {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 超出两行则以...形式隐藏
-webkit-box-orient: vertical;
cursor: pointer;
}
更多推荐
已为社区贡献27条内容
所有评论(0)