Las tablas de Buefy tienen una configuración en la que puede elegir qué filas se resaltan con un color específico según una variable en la fila.
:row-class="(row, index) => row.variable === x && 'is-info'">y agregando estilo para la clase de fila específica:
<style> .is-info' { background: #FF8C4B; }Esto funciona y puedo resaltar todas las filas con x como sus variables. Pero considere si tengo una tabla con múltiples variables X, Y, Z. Y quiero que todos los que tienen un valor variable de X se resalten en azul y los que tienen Y en rojo. es posible? Parece que no puedo encontrar ningún ejemplo en ningún lado.
Esta es mi sección de datos actual de la página vue:
export default { name: "Demo", data: () => { data: () => { return { loading: null, alphabets: [], className:{ 'x': '.bg-danger', 'y': '.bg-success' }, };Puede definir el mapa de clase en el objeto de datos de la siguiente manera:
:row-class="(row, index) => className[row.variable]"> data: ()=> ({className: { x:'info', y:'primary' z:'warning' }})Así es como se puede hacer:
:row-class="(row, index) => row.alphabet === 'x' && 'is-x' || row.alphabet === 'y' && 'is-y' || row.alphabet === 'z' && 'is-z'"y luego darle estilo
<style> .is-x{ background: #f15462; } .is-y{ background: #f5bb1a; } .is-z{ background: #3bdc5e; } } </style>