问题描述
- 我正在尝试根据表中字段之一的值为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>
,
我也遇到了同样的问题! 这就是解决不工作的 :item-class 对我来说有效的方法: (我只想格式化一个 defRow)
outcome
并不是说 df2 <- data.frame(ID = seq(1,32,by=1),sofa_score = sample(1:8,8,replace = TRUE),resp_score = sample(1:8,outcome = c('deceased','recovered'),days = sample(1:20,coag_score = sample(1:8,replace = TRUE))
现在的行为与 <template>
<v-data-table
:headers="headersForTable"
:items="chosenTableData"
>
<template v-slot:item="{item}">
<tr :class="isDefRow(item) ? 'defRow' : ''" @click="rowInTableClicked(item) >
<td v-for="(head,i) in headersForTable" :key="i">
{{ item[head.value] }}
</td>
</tr>
</template>
</v-data-table>
</template>
<script lang="ts">
isDefRow(row: any): boolean {
// ...
}
get headersForTable() {
// returns the array of header objects
}
get chosenTableData() {
// returns the data array
}
</script>
<style scoped>
.defRow {
font-weight: bold;
}
</style>
的行为相同!