Bootstrap-vue 在 b-table 上使用 b-tooltip
Bootstrap-vue using b-tooltip on b-table
我正在使用 bootstrap-vue 在 b-table 上显示我的数据,我截断了长文本并使用 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, class: 'truncate1'},
{key: 'key4', label: 'lable 4' , sortable: true, class: 'truncate1'},
{key: 'keyn', label: 'lable n' , sortable: true, class: 'truncate1'},
],
<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
我正在使用 bootstrap-vue 在 b-table 上显示我的数据,我截断了长文本并使用 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, class: 'truncate1'},
{key: 'key4', label: 'lable 4' , sortable: true, class: 'truncate1'},
{key: 'keyn', label: 'lable n' , sortable: true, class: 'truncate1'},
],
<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