javascript - 如何自定义 v-data-table 中的所有标题?
问题描述
我正在尝试自定义我v-data-table
喜欢的所有标题
<v-data-table
:headers="headers"
:items="desserts"
:disable-sort="true"
:hide-default-footer="true"
>
<template v-slot:header="{ header }">
{{ header.text.toUpperCase() }}
</template>
</v-data-table>
我在文档中看到如何只为这样的 ONE 标头执行此操作:
<v-data-table
:headers="headers"
:items="desserts"
:disable-sort="true"
:hide-default-footer="true"
>
<template v-slot:header.name="{ header }">
{{ header.text.toUpperCase() }}
</template>
</v-data-table>
但我想自定义所有标题,但我不知道如何做到这一点。我的标题也是动态的。
解决方案
您可以使用header
(not header.<name>
) 插槽来执行此操作。请注意,此插槽用于一次生成所有标题列。这意味着您需要<th>
使用v-for
指令动态创建标签。
此外,它位于默认标题下,因此您需要添加hide-default-header
道具。
<v-data-table :headers="headers" :items="desserts" hide-default-header>
<template v-slot:header="{ props }">
<thead>
<tr>
<th v-for="header in props.headers" :key="header.text">
{{ header.text.toUpperCase() }}
</th>
</tr>
</thead>
</template>
</v-data-table>
请参阅此工作示例。
推荐阅读
- php - 如何修复 PHP 中的 CORS 错误?(CORS 没有成功)
- angular - Angular SCSS 编写 url() 的正确方法
- oracle - Oracle 11g - 如何使用表连接从函数返回记录
- c# - 如何将您的数据属性(元数据)添加到 PDF (iTextSharp)
- java - WorkManager 中的 Worker 和 ListenableWorker 有什么区别?
- python - 无法连接到在本地 Docker 容器中运行的 gRPC 服务
- python - 针对 OpenApi 3 .yml 模式验证 DRF 响应
- ionic-framework - 离子选择显示三个点
- python - Python素数列表生成器错误
- excel - 使用基于登录和注销的数据透视图在线显示用户