如何解决在b表上使用b-tooltip进行Bootstrap-Vue
我正在使用bootstrap-vue在b表上显示我的数据,我截断了长文本,并使用title prop在其上悬停时显示了原始文本。 它与客户CSS一起很好地工作,但我想使用b-tooltip
<b-table hover sticky-header outlined
show-empty
small
stacked="md"
:items="apiitems"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:filterIncludedFields="filterOn"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:sort-direction="sortDirection"
@filtered="onFiltered">
<template v-slot:cell()="data">
<span :title='data.value'>{{ data.value}}</span>
</template>
</b-table>
fields: [
{ key: 'actions',label: 'Actions',class: 'truncate1'},{key: 'key3',label: 'label 3',sortable: true,{key: 'key4',label: 'lable 4',{key: 'keyn',label: 'lable n',],
<style>
.truncate1 {
max-width: 350px;
white-space: Nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
解决方法
使用v-b-tooltip指令就像是一种魅力。
<!-- Main table element -->
<b-table hover sticky-header outlined
show-empty
small
stacked="md"
:items="apiitems"
:fields="fields"
>
<template v-slot:cell()="data">
<span v-b-tooltip.hover :title=data.value>{{ data.value}}</span>
</template>
</b-table>
参考:here
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。