¿Cómo se diseña una fila específica en v-data-table? [Vuetify]

Te damos la bienvenida a nuestro sitio web, en este sitio vas a hallar la resolución de lo que buscas.

Solución:

Si está utilizando versiones más recientes de vuetify, tiene acceso a item-class como propiedad de la v-data-table. Esto proporcionará la item como el primer argumento de la función de devolución de llamada.

Y luego defina la función que devolverá el nombre de la clase:

methods: 
  itemRowBackground: function (item) 
     return item.protein > 4.2 ? 'style-1' : 'style-2'
  

Luego simplemente defina las clases para style-1 y style-2:

.style-1 
  background-color: rgb(215,215,44)

.style-2 
  background-color: rgb(114,114,67)

Aquí hay un lápiz de código para este ejemplo que funcionará para su ejemplo de lápiz de código

Editar Si :item-class no está disponible para su versión actual de Vuetify, o necesita más control sobre la fila además de vincular una clase, tendrá que usar el item ranura y enlace la clase/estilo/etc manualmente.

Apunta al item slot y vincula la clase a la fila manualmente:

Alternativamente, puede pasar :class="customRowClass(item, lowestEntry)" y definir el customRowClass método:

methods: 
  customRowClass (item, lowestEntry) 
    return item.id_entry === lowestEntry['id_entry'] ? 'custom-bg' : ''
  

Basado en la sugerencia de totalhacks, la nueva clase de elemento vuetifys:

new Vue(
  el: '#app',
  vuetify: new Vuetify(),
  methods: 
    row_classes(item) 
        if (item.calories < 200) 
          return "orange";
         
    
  ,
  data () 
    return 
      singleSelect: false,
      selected: [],
      headers: [text: 'Dessert', value: 'name', text: 'Calories', value: 'calories' ,],
      desserts: [name: 'Frozen Yogurt',calories: 159,,name: 'Ice cream sandwich',calories: 237,,name: 'Eclair',calories: 262,,name: 'Cupcake',calories: 305,,],
    
  ,
)

.orange 
  background-color: orange;

Al final de todo puedes encontrar las observaciones de otros usuarios, tú igualmente tienes la habilidad mostrar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador