es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Tabla de Vue Buefy con múltiples estados de fila.

10 Jun, 2023 Programación

Buefy Tables tiene una configuración donde puedes elegir qué filas se resaltan con un color específico según una variable en la fila.

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

y agregando un estilo para la clase de fila específica:

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 todas las que tengan un valor de variable de X sean resaltadas en azul y las que tengan una variable de Y sean rojas. ¿Es esto posible? No puedo encontrar ningún ejemplo en ninguna parte.

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’
},
};

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el resaltado de filas con diferentes valores de variables en diferentes colores, se puede modificar la propiedad row-class de la tabla Buefy para verificar cada variable por separado y aplicar una clase específica en consecuencia. Aquí hay un ejemplo de cómo se puede lograr esto:

    <b-table :data="myData" :row-class="rowClass"></b-table>

    export default {
  data() {
    return {
      myData: [
        { name: 'Alice', variable: 'X' },
        { name: 'Bob', variable: 'Y' },
        { name: 'Charlie', variable: 'X' },
        { name: 'Dave', variable: 'Z' },
      ],
      className: {
        X: 'is-x',
        Y: 'is-y',
        Z: 'is-z',
      },
    };
  },
  methods: {
    rowClass(item) {
      return {
        [this.className[item.variable]]: true,
      };
    },
  },
};

    En este ejemplo, definimos un método rowClass que toma cada ítem en el array myData y devuelve un objeto con claves dinámicas basadas en la propiedad variable. El valor de cada clave es un booleano que indica si se debe aplicar una clase específica, como is-x para la variable X o is-y para la variable Y.

    Luego, vinculamos este método a la propiedad row-class de la tabla Buefy para que cada fila reciba la clase apropiada según su valor de variable.

    Finalmente, podemos definir estilos para cada uno de los nombres de clase en el objeto className para lograr el efecto de resaltado deseado.

    <style>
  .is-x {
    background-color: blue;
  }
  .is-y {
    background-color: red;
  }
  .is-z {
    background-color: green;
  }
</style>

    Con esta configuración, las filas con variable X se destacarán en azul, las filas con variable Y se destacarán en rojo y las filas con variable Z se destacarán en verde.

Comments are closed.