工具提示在禁用和重新启用 BootstrapVue table 列后消失

Question

我有一个 BootstrapVue table 看起来像这样；

当您将鼠标悬停在 First Name 列上时，将出现工具提示 Tooltip for First name。顶部的复选框将使相应的 table 列变为 appear/disappear.

这是我遇到的错误的描述。

我取消选中 First Name 复选框。列 First Name 消失。现在，我重新选中 First Name 复选框。列 First Name 再次出现。这可以。但是，当我将鼠标悬停在 First Name 列时，工具提示不再有效。

这是单个 HTML 文件中的完整代码。

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.min.js"></script>

<div id='app'>
<b-checkbox
    :disabled="visibleFields.length == 1 && field.visible"
    v-for="field in showFields" 
    :key="field.key" 
    v-model="field.visible" 
    inline
  >
    {{ field.label }}
  </b-checkbox>  
  <b-table :items="items" :fields="visibleFields" bordered>  
  </b-table>
  <b-tooltip target="HeaderFirst" triggers="hover" container="HeaderFirst">
    Tooltip for First name<br>
  </b-tooltip>      
</div>

<script>
    new Vue({
  el: '#app',
  computed: {
    visibleFields() {
      return this.fields.filter(field => field.visible)
    },
    showFields() {
      return this.fields.filter(field => field.key.includes('first') || field.key.includes('last'))
    }
  },
  data: dataInit,  
})

function dataInit() {  
    
    let init_data = {};
    
    init_data.fields = [
        { key: 'id', label: 'ID', visible: true },
        { key: 'first', label: 'First Name', visible: true, 
          thAttr: {
                id: "HeaderFirst"
              }, 
        },
        { key: 'last', label: 'Last Name', visible: true },
        { key: 'age', label: 'Age', visible: true },
      ];
    init_data.items = [
        { id: 1, first: 'Mike', last: 'Kristensen', age: 16 },
        { id: 2, first: 'Peter', last: 'Madsen', age: 52 },
        { id: 3, first: 'Mads', last: 'Mikkelsen', age: 76 },
        { id: 4, first: 'Mikkel', last: 'Hansen', age: 34 },
      ];
    
    return init_data;
  }
</script>

我正在使用 vue v2.6，BootstrapVue。

Answer 1

禁用元素事件 hover 无效。您需要用其他元素包装元素，例如div 你设置工具提示的地方，它应该能正常工作

Answer 2

挂载时 <b-tooltip> 的目标必须存在于 DOM 中。它不会动态地将新工具提示附加到 DOM.

中新创建的元素

您的代码的第一个运行显示工具提示，因为 <b-table> 最初包含 #HeaderFirst 元素。当您取消选中 First Name 框时，<b-table> 中的现有元素将通过计算的属性替换为新元素。从 DOM 中删除的元素包括 <b-tooltip> 最初附加工具提示的元素，并且在 <b-table> 更新后没有生成新的工具提示。

解决方案

一种解决方案是仅当目标元素可见时才呈现 <b-tooltip>：

创建一个计算属性来确定 #HeaderFirst 字段是否可见。
根据计算出的属性有条件地渲染 <b-tooltip>。

new Vue({
  computed: {   1️⃣
    firstNameHeaderVisible() {
      return this.fields.find(field => field.thAttr?.id === 'HeaderFirst')?.visible
    }
  },
  ⋮
})

                                               2️⃣
<b-tooltip target="HeaderFirst" v-if="firstNameHeaderVisible">

demo

工具提示在禁用和重新启用 BootstrapVue table 列后消失

Tooltip disappears after disabling and re-enabling BootstrapVue table column

javascript

vue.js

vuejs2

tooltip

bootstrap-vue

解决方案