當用戶在bootstrap-vue表的列名上移動滑鼠時顯示工具提示

我有一個如下所示的 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>

這就是我想做的。當用戶將滑鼠移動到First Name列名單元格時，我想顯示一個工具提示，上面寫著“單擊以排序名字”。

我正在使用 v2.6

uj5u.com熱心網友回復：

在bootstrap-vue的b-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”添加到表定義中的名字列。

標籤：javascript Vue.js 工具提示 引导程序

上一篇：Webpack/Vuevue__WEBPACK_IMPORTED_MODULE...未定義

下一篇：019 Linux tcpdump 抓包案例入門可真簡單啊？