vuetify.js - 如何自定义表头中的所有元素?
问题描述
查看此页面上的示例,将 toUpper 应用于所有标题项的方法是什么?必须逐个执行(即 header.calories、header.fat...)看起来太笨拙了,而且我无法弄清楚 v-for 如何环绕模板/v-slot 元素。是使用“div”并水平弯曲它的唯一方法吗?
<template>
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:header.name="{ header }">
{{ header.text.toUpperCase() }}
</template>
</v-data-table>
</template>
<script>
export default {
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' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
....// rest of it
],
}),
}
</script>
解决方案
可以循环标题以使所有大写
这是工作的codepen:https ://codepen.io/chansv/pen/gOaRWQb?editors=1010
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
hide-default-header
>
<template v-slot:header="{ props }">
<th v-for="head in props.headers">{{ head.text.toUpperCase() }}
</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' },
],
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%',
},
],
}),
})
推荐阅读
- python - 在 SqlAlchemy 模型中存储字典
- python - 'DataFrame' 对象在 ApplyResult 引用中不可调用
- python-3.x - 你如何找到图像中的轮廓并调整它的大小python3?
- google-apps-script - 代码错误在单元格内弹出为#DIV/0!在代码运行通过所有单元格之后
- python - 用另一个 Discord.py 机器人测试 Discord.py 机器人 / 模拟
- javascript - 如何使用 JSON 文件制作黑名单?
- laravel - Laravel API 身份验证
- python-3.x - KeyError:'/内容'
- python - 文件中的变量数据[1]没有改变?
- python-3.x - 在给定圆中生成多个随机点的函数