gpt4 book ai didi

vue.js - 槽头 vuetify 2.0

转载 作者:行者123 更新时间:2023-12-02 16:43:12 26 4
gpt4 key购买 nike

早上好,我正在修改vuetify.js中的一个数据表的slot header,添加一个tooltip,这一切都很好,但是asc和desc的箭头没有显示,我想知道我是什么做错了。

<template  v-slot:header="{ props: { headers } }">
<thead>
<tr>
<th
style="white-space: nowrap"
:class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
@click="changeSort(header.value)"
v-for="element in headers"
:key="element.text">
<v-tooltip top>
<template v-slot:activator="{ on }">
<span v-on="on">{{element.text}}</span>
</template>
<span>{{element.text}}</span>
</v-tooltip>
</th>
</tr>
</thead>
</template>

最佳答案

documentation 中所述,

It is important to note some slot (eg: item/body/header) will completely takes over the internal rendering of the component which will require you to re-implement functionalities such as selection and expansion.

但是你可以customize the default header

You can use the dynamic slots header. to customize only certain columns. is the name of the value property in the corresponding header item sent to headers.

修改文档第二部分中的代码笔,您可以看到如何使用 dynamic slot names 为每个标题添加工具提示。 .这里我有前 3 列的工具提示,其余列只有默认文本,但是在 headerTooltips 中为所有填充工具提示文本将为所有标题生成工具提示。

<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-for="header in headers" v-slot:[`header.${header.value}`]="{ header }">
<v-tooltip v-if="headerTooltips[header.value]" bottom :key="header.value">
<template v-slot:activator="{ on }">
<span v-on="on">{{ header.text }}</span>
</template>
<span>{{ headerTooltips[header.value] }}</span>
</v-tooltip>
<span v-else>{{ header.text }}<span>
</template>
</v-data-table>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
headerTooltips: {
name: 'Name tooltip',
calories: 'Calories tooltip',
fat: 'Fat tooltip'
},
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}),
})

这是 Codepen:https://codepen.io/keeganwitt/pen/ExVVyqa

关于vue.js - 槽头 vuetify 2.0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61143116/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com