如何从Vue的标题列表中添加工具提示到单个标题?

我试图创建一个工具提示，只有一个头(一个值' retirement ')，但没有其他的头。

这是一个漫长的旅程。我是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>
</v-data-table>

您可以在每个标题项上使用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>

相关内容

最新更新

热门标签：