One interesting feature of Buefy tables is the ability to highlight rows with a specific color based on a variable in the row.
:row-class="(row, index) => row.variable === x && 'is-info'">In order to style the specific row class:
<style>
.is-info {
background: #FF8C4B;
}
While this method works for highlighting rows where the variable equals X, what if you want to differentiate between multiple variables X, Y, Z and assign different colors to each? Unfortunately, examples for this scenario are hard to come by. Here's how my data section in Vue page currently looks like:
export default {
name: "Demo",
data: () => {
return {
loading: null,
alphabets: [],
className:{
'X': '.bg-danger',
'Y': '.bg-success'
},
};
}