[早上好,我正在vuetify.js中修改数据表的插槽标题以添加工具提示,所有这些操作都很好,但是没有显示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中所述,
[请注意,某些插槽(例如:
item
/body
/header
)将完全取代组件的内部渲染,这将需要您重新实现选择和扩展之类的功能。] >
您可以使用动态广告位标题。仅自定义某些列。是发送到标题的相应标题项目中value属性的名称。
在文档的第二部分中修改代码笔,您可以看到如何使用dynamic slot names为每个标题添加工具提示。在这里,我为前三列提供了一个工具提示,而对于其余列,只有默认文本,但是在
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