如何在Vue的标题列表中为单个标题添加工具提示？

juzqafwq 于 2023-01-21 发布在 Vue.js

关注(0)|答案(1)|浏览(134)

我试图只为一个标题（值为“Retire”的标题）创建一个工具提示，而不为其他标题创建。
这是一个漫长的旅程。我是vue的新手，因此与AI物种（chatgpt）结盟，这对我有一定的帮助。现在我的前端没有显示错误，浏览器没有显示错误，但没有工具提示显示。有人能帮助我实现这一点吗？谢谢
这是我创建数据表并设置当前标题的代码片段。

<v-data-table
          class="zebrastripes"
          :items="autofilterItems"
          :items-per-page="20"
          :footer-props="{
            'items-per-page-options': [5, 10, 20, -1],
            }"
          :headers="headers"
          :search="search"
          :no-results-text="$t('General.noSearchMatch')"
          :custom-sort="dateSorting"
          :loading="trigger_loader"
        >
          <template v-slot:header="header">
            <th :key="header.text">
              <v-tooltip :value="header.value === 'Retire'" bottom>
                <template v-slot:activator="{ on }">
                  <span v-on="on">{{header.text}}</span>
                </template>
                <span v-if="header.value === 'Retire'">{{ header.tooltip }}</span>
              </v-tooltip>
            </th>
          </template>

vue.js

来源：https://stackoverflow.com/questions/75171896/how-to-add-a-tooltip-to-a-single-header-from-a-list-of-headers-in-vue

1条答案

按热度按时间

piv4azn71#

您可以在每个标题项上使用header.value插槽，并应用一个条件来仅显示特定标题的工具提示。
下面是一个使用工具提示的例子。你会发现工具提示只会显示标题为Retire的标题。

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <v-app>
        <v-data-table
          :headers="headers"
          :items="autofilterItems"
          :items-per-page="5"
          class="elevation-1"
          :items-per-page="20"
          no-results-text="General.noSearchMatch"
          >
          <template v-for="header in headers" v-slot:[`header.${header.value}`]="{ header }">
          <v-tooltip bottom v-if="header.value == 'Retire'">
            <template v-slot:activator="{ on }">
              <span v-on="on">{{ header.text }}</span>
            </template>
            <span>{{ header.tooltip }}</span>
          </v-tooltip>
          <span v-else>{{ header.text }}</span>
          </template>
        </v-data-table>
      </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.2/axios.min.js" integrity="sha512-QTnb9BQkG4fBYIt9JGvYmxPpd6TBeKp6lsUrtiVQsrJ9sb33Bn9s0wMQO9qVBFbPX3xHRAsBHvXlcsrnJjExjg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
      new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data() {
          return {
            headers: [
              {
                text: 'Retire',
                value: 'Retire',
                sortable: false,
                tooltip: 'I am a tooltip'
              },
              {
                text: 'Dessert (100g serving)',
                value: 'name',
                sortable: false,
              },
              {
                text: 'Fat (g)',
                value: 'fat',
                sortable: false,
              },
              {
                text: 'Carbs (g)',
                value: 'carbs',
                sortable: false,
              },
              {
                text: 'Protein (g)',
                value: 'protein',
                sortable: false,
              },
              {
                text: 'Iron (%)',
                value: 'iron',
                sortable: false,
              },
            ],
            autofilterItems: [{
                name: 'Frozen Yogurt',
                Retire: true,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                iron: 1,
              },
              {
                name: 'Ice cream sandwich',
                Retire: true,
                fat: 9.0,
                carbs: 37,
                protein: 4.3,
                iron: 1,
              },
            ],
          }
        },
      })
    </script>
  </body>
</html>

赞(0）回复(0）举报 2023-01-21

我来回答

如何在Vue的标题列表中为单个标题添加工具提示？

1条答案

相关问题

热门标签

最新问答