具有多行状态的Vue Buefy表

Question

Buefy表有一个设置，您可以根据行中的变量选择用特定颜色突出显示的行。

:row-class="(row, index) => row.variable === x && 'is-info'">

并为特定行类添加样式：

<style>
.is-info' {
background: #FF8C4B;
}

这很有效，我可以突出显示所有以x为变量的行。但考虑一下，如果我有一个包含多个变量X，Y，Z的表。我希望所有可变值为X的都用蓝色突出显示，Y的都用红色突出显示，这可能吗？我似乎在任何地方都找不到任何例子。

这是我当前vue页面的数据部分：

export default {
name: "Demo",
data: () => {
data: () => {
return {
loading: null,
alphabets: [],
className:{
'x': '.bg-danger',
'y': '.bg-success'
},
};

Answer 1

您可以在数据对象中定义类映射，如下所示：

:row-class="(row, index) => className[row.variable]">
data: ()=> ({className: {
x:'info',
y:'primary'
z:'warning'
}})

Answer 2

这就是它的实现方式：

:row-class="(row, index) => row.alphabet === 'x' && 'is-x' || row.alphabet === 'y' && 'is-y' || row.alphabet === 'z' && 'is-z'"

然后将其设置为

<style>
.is-x{
background: #f15462;
}
.is-y{
background: #f5bb1a;
}
.is-z{
background: #3bdc5e;
}
}
</style>