当用户将鼠标移动到 bootstrap-vue 表的列名称上时显示工具提示

Question

我有一个 bootstrap-vue 表，如下所示；

这是该表的代码；

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // Note 'isActive' is left out and will not appear in the rendered table
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Person age',
            sortable: true,
            // Variant applies to the whole column, including the header and footer
            variant: 'danger'
          }
        ],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

这就是我想做的。当用户将鼠标移动到名字列名称单元格时，我想显示一个工具提示，显示“单击以对名字进行排序”。

我正在使用 vue v2.6

Answer 1

借助bootstrap-vueb-tooltip组件> 你可以像下面的代码那样做到这一点：

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
    <!-- using "b-tooltip" component that targets the defined "id" in the fields of "b-table" -->
    <b-tooltip target="myHeader" triggers="hover" container="myHeader">
      Click to sort First Name
    </b-tooltip>
  </div>
</template>

<script>
export default {
  name: "CompoTable",
  data() {
    return {
      // Note 'isActive' is left out and will not appear in the rendered table
      fields: [
        {
          key: 'last_name',
          sortable: true
        },
        {
          key: 'first_name',
          /* ------------------------------ */
          /* I changed sortable to "true" to make sorting */
          /* ------------------------------ */
          sortable: true,
          /* ------------------------------ */
          /* add this to add "id" to "th" tag related to "first name" */
          /* ------------------------------ */
          thAttr: {
            id: "myHeader"
          }
        },
        {
          key: 'age',
          label: 'Person age',
          sortable: true,
          // Variant applies to the whole column, including the header and footer
          variant: 'danger'
        }
      ],
      items: [
        { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
      ]
    }
  }
}
</script>

此外，您还需要 thAttr 字段属性来添加 " id” 添加到表定义中的 first-name 列。