Bootstrap-vue 在 b-table 上使用 b-tooltip答案

【问题标题】：Bootstrap-vue using b-tooltip on b-tableBootstrap-vue 在 b-table 上使用 b-tooltip
【发布时间】：2020-12-17 00:49:02
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： api vue.js bootstrap-vue twitter-bootstrap-tooltip

【解决方案1】：

使用 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

【讨论】：