javascript - 如何将工具提示添加到 vuetify 中的数据表标题?

标签 javascript vue.js vuetify.js

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

在最新版本中你已经命名了slots,所以你需要先知道header name

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

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

最佳答案

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

选项 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:在不丢失排序功能的情况下自定义每个标题

我想这更像是您正在尝试做的事情以及旧方法的替代品。你可以循环 <template v-slot:header>并使用 Dynamic Slot Names来完成这个。动态插槽名称的语法如下所示 <template v-slot:[dynamicSlotName]> .

示例:

<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

关于javascript - 如何将工具提示添加到 vuetify 中的数据表标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58714401/

相关文章:

javascript - 如何使用 Cypress 在 Vuetify <v-slider> 上选择特定点

javascript - JavaScript 变量的背景颜色十六进制

javascript - 生成的 Julia 集和维基百科图像之间的差异

javascript - 为什么这个 math.log 函数不起作用?

javascript - 带有 vue 的 HTML 5 视频和 src 值

javascript - 如何从组件内部获取 Vue 组件的实例

vue.js - Vuetify在明暗主题之间切换(使用vuex)

javascript - 正则表达式匹配除 <、>、"、/、\之外的每个字符

vue.js - 样式 Vue 插槽

vue.js - Vuetify 抽屉导航工作一次然后停止