Vuetify表-根据项目属性更改行颜色

时间:2020-07-07 10:09:57

标签: javascript vue.js vuetify.js

我需要根据列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' ....

手动渲染一些行

0 个答案:

没有答案