我需要根据列stage.id
更改Vuetify数据表中的行颜色。
这些是表格内的插槽:
<template v-slot:item.stage="{ item }">
<v-select
item-text="name"
item-value="id"
:items="pipeline.stages"
v-model="item.stage.id"
label=""
@input="setStage(item.id,item.stage.id)"
></v-select>
</template>
<template v-slot:item.price="{ item }">
<span>[[ formatPrice(item.price) ]]</span>
</template>
<template v-slot:item.presentation_date="{ item }">
<span>[[ item.presentation_date_display ]]</span>
</template>
每个阶段在变量this.colors中定义了自己的颜色:
data : {
colors:{
0:"green",
1:"orange",
...
}
}
我要排成一种颜色[item.stage.id]。
你能帮我吗?我尝试使用v-slot:item
,但是由于我同时使用了checkbox列和许多其他列,因此它完全破坏了表。
编辑
可能的解决方案是使用item
插槽并完全按照Vuetify的方式渲染行,仅使用条件if item.value === 'stage' ....