问题描述
我正在使用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