css - 如何让 item-class 在 v-data-table 中工作(这样我就可以为一行着色)?
问题描述
- 我正在尝试根据表中某个字段的值对 v-data-table 中的一行进行着色。
- 我已经尝试了这里和其他地方提供的所有解决方案,并尝试了更多。
- 我正在运行当前版本的 Vuetify (2.3.9)
- 我已经重新加载了所有内容,清除了浏览器缓存和 cookie 等。
- 我尝试过使用和不使用插槽。
- 我的应用程序包含在 v-app 中
== 没有插槽 ==
<v-data-table
:items-per-page="50"
:headers="headers"
:items="jobs"
:height="600"
:search="search"
:hide-default-footer="true"
:item-key="jobs.JobID"
:item-class="row_class"
mobile-breakpoint="300"
no-data-text="No jobs today!"
dense
>
</v-data-table>
methods: {
row_class (item) { return "jobGreen" }
}
.jobGreen {
background-color: lightgreen;
}
结果:
- 该类未应用。
- 使用 item-class="jobGreen" (即不响应)也失败了
- 将 jobGreen 类应用于 v-data-table(即 class='jobGreen')按预期工作
== 使用插槽 ==
(简化)
<v-data-table>
<template v-slot:item="{item}">
<tr :class="row_class(item)">
<td>
{{ item.JobNumber }}
</td>
</tr>
</template>
</v-data-table>
methods: {
row_class (item) { return "jobGreen" }
}
好的,这可行,但表的第一行从未应用过类!对表格进行排序以使不同的记录位于顶部不会改变任何事情,因此与数据无关。正在为表的每一行调用该方法。
解决方案
试试这个(这是唯一对我有用的东西,但它破坏了一些表格的基本功能):
<template v-slot:body="{ items }">
<tbody>
<tr :class="row_class(item)" v-for="item in items" :key="item.<name>">
<td class="text-start">{{ item.<name> }}</td>
</tr>
</tbody>
</template>
推荐阅读
- swift - Swift 4,将 UISwipeGestureRecognizer 方向传递给处理函数
- react-router - 如何手动计算 url 到 react-router 路径
- python - 使用 python 和 pandas 读取雅虎数据时出错
- python - 读入文件并仅打印每行的最后一个单词,如果这些单词是 8 个字符或更长并且不包含 #、@ 或 : 符号
- oracle - PLSQL 获取所有表数据
- c# - 按下回车键时 Visual Studio 执行关闭
- java - 实时改变一个变量android的值
- linux - 如何使用 xdg-open 将应用程序置于最前面
- python - tweepy.Cursor 在特定时间之前打印推文的属性是什么?
- php - $this->validate 导致“加载响应数据失败”