【问题标题】:How to add tooltip to datatable header in vuetify?如何在 vuetify 中将工具提示添加到数据表标题?
【发布时间】:2020-03-02 00:10:53
【问题描述】:

在 vuetify 上的旧版本中,您可以访问 headerCell 插槽并轻松添加工具提示 - 请参阅 https://codepen.io/nueko/pen/dZoXeZ

在最新版本中你已经命名了槽,所以你需要知道标题名称之前

<template v-slot:header.givenname="{ header }">

有没有办法为所有标题添加工具提示?

【问题讨论】:

    标签: javascript vue.js vuetify.js


    【解决方案1】:

    有两种方法可以实现这一点。

    选项 1:自定义整个表格行

    如果您需要自定义表格标题内的整行元素,这可能会很有用。即使如果您不想放弃 v-data-table 中默认存在的排序功能,我也不建议您采用这种方式。

    示例:

    <template v-slot:header="{ props: { headers } }">
      <thead>
        <tr>
          <th v-for="h in headers">
            <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <span v-on="on">{{h.text}}</span>
            </template>
            <span>{{h.text}}</span>
          </v-tooltip>
          </th>
        </tr>
      </thead>
    </template>
    

    工作笔:https://codepen.io/onelly/pen/QWWmpZN

    选项 2:自定义每个标题而不丢失排序功能

    我想这更像是您正在尝试做的事情以及旧方式的替代品。您可以循环 &lt;template v-slot:header&gt; 并使用 Dynamic Slot Names 来完成此操作。动态插槽名称的语法类似于 &lt;template v-slot:[dynamicSlotName]&gt;

    示例:

    <template v-for="h in headers" v-slot:[`header.${h.value}`]="{ header }">
      <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <span v-on="on">{{h.text}}</span>
        </template>
        <span>{{h.text}}</span>
      </v-tooltip>
    </template>
    

    工作笔:https://codepen.io/onelly/pen/ExxEmWd

    【讨论】:

    • 谢谢,第二个选项正是我想要的。
    • 这太棒了!但是,当我尝试在此处添加示例时:vuetifyjs.com/en/components/data-tables/#crud-actions 它引发异常“意外标识符”,我认为它指的是 v-slot 标头语法。如何在v-slot:[`header.${h.value}`]="{ header }" 中解释语法[`header.${h.value}`] 的参考链接会有所帮助。谢谢!
    • 顺便说一句...我正在使用内部模板:`....` 所以我认为我需要转义反引号或实施替代方案?
    • 我想出的是逃避反引号和$ - 这个&lt;template v-for="h in headers" v-slot:[`header.${h.value}`]="{ header }"&gt;变成&lt;template v-for="h in headers" v-slot:[\`header.\${h.value}\`]="{ header }"&gt;
    猜你喜欢
    • 2022-08-22
    • 2013-06-02
    • 2016-08-04
    • 2021-04-03
    • 1970-01-01
    • 2023-04-06
    • 2018-05-07
    • 1970-01-01
    • 2017-01-16
    相关资源
    最近更新 更多