BootstrapVue表的可排序标题单元上的工具提示

问题描述

我想为BootstrapVue可排序表的某些标题单元添加工具提示。该表被标记为：

             <b-table 
                striped 
                small 
                hover 
                sticky-header
                sort-icon-left
                selectable
                id="search_results_table_id"
                select-mode="single"
                :items="person_list" 
                :fields="person_fields">

我尝试使用v-slot：head（）完成此操作，但无法使其正常工作。这是我的person_fields对象当前的外观。

person_fields: [{key: 'name',label: 'Person ID',sortable: true,tooltip: 'Eureka!'},...],

这是我的v型槽：head ...

<template v-slot:head()="data">                     
  <span v-b-tooltip.hover :title='data.tooltip'>{{ data.label}}           
  </span>                   
</template>

提前感谢您的帮助！

解决方法

这是因为您要将title绑定到广告位中的未定义属性。

tooltip属性嵌套在field对象中，该对象包含该字段的所有数据。

<template v-slot:head()="data">                     
  <span v-b-tooltip.hover :title='data.field.tooltip'>
    {{ data.label }}           
  </span>                   
</template>

bootstrap-vue vue.js