我可以在数据表中的确定行中应用diff样式
这是我的代码:
<v-data-table
:headers="headers"
:items="items"
v-model="selected"
:search="search"
:no-data-text="mensagem"
select-all
:rows-per-page-text="linhasPorPagina">
<template slot="items" slot-scope="props">
<td>
<v-checkbox
primary
hide-details
v-model="props.selected"
></v-checkbox>
</td>
<td class="text-xs-left">{{ props.item.id }}</td>
<td class="text-xs-left">{{ props.item.apresentante }}</td>
</v-data-table>
我想在Id&gt; 4(样本)
时应用红线答案 0 :(得分:7)
您实际上可以将<td>
元素包装在<tr>
元素中。然后,您可以使用Vue样式绑定来确定是否要应用类。
<template>
<tr v-bind:class="{'active-class-name': isActive(item)}">
<td>Woo</td>
</tr>
</template>
它使用tbody
来渲染row (tr)
块,其中包含应用的类名和包含在其中的子列。
答案 1 :(得分:7)
您现在可以使用vuetifys数据表的item-class属性:
new Vue({
el: '#app',
vuetify: new Vuetify(),
methods: {
row_classes(item) {
if (item.calories < 200) {
return "orange"; //can also return multiple classes e.g ["orange","disabled"]
}
}
},
data () {
return {
singleSelect: false,
selected: [],
headers: [{text: 'Dessert (100g serving)', value: 'name'},
{ text: 'Calories', value: 'calories' },
],
desserts: [{name: 'Frozen Yogurt',calories: 159,},
{name: 'Ice cream sandwich',calories: 237,},
{name: 'Eclair',calories: 262,},
{name: 'Cupcake',calories: 305,},
],
}
},
})
.orange {
background-color: orange;
}
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.css'>
<div id="app">
<v-app>
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
:item-class= "row_classes"
class="elevation-1"
>
</v-data-table>
</v-app>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.js'></script>
答案 2 :(得分:1)
这是一个代码集,可以产生与您正在寻找的结果类似的结果。它使用Daniel上面评论中引用的样式绑定语法。
https://codepen.io/lshapz/pen/jxmgyx
如果您希望整行有红线(或者在我的示例中为红色背景),您需要将三个td包装在tr中。如果你只想在id单元格上,那么你可以添加
<td class="text-xs-left" :style="{backgroundColor: (props.item.id > 4 ? 'red' : 'transparent' ) }">
{{ props.item.id }}
</td>
答案 3 :(得分:0)
我也试图在vuetify数据表中设置行的样式,但以上答案并没有我需要的所有内容。 使用Vuetify v2
我想在满足特定条件时将一个类添加到行中。
<v-data-table
:headers="myHeaders"
:items="myItems"
>
<template v-slot:item="props">
<tr :class="{'my-class': props.item.current > props.item.total}">
<td>{{props.item.current}}</td>
<td>{{props.item.total}}</td>
</tr>
</template>
</v-data-table>
...
// js portion of the component (computed prop)
myItems() {
return [
{
current: 101,
total: 100
},
{
current: 45,
total: 100
}
]
}