1

Hola amigos, tengo una table donde muestro los datos de mi array, y lo que deseo es colorear cada las filas por grupos(por el campo n_comp) y darle el efecto cebra

Es decir, mis dos primeras filas con la n_comp 00000001 deberían tener la clase 'bg-dark' la tercera ya no porque tiene otra serie distinta, la cuarta debería tener la clase 'bg-dark' y las dos ya no deberían llevar la clase

Vue.config.productionTip = false;
Vue.config.devtools = false
var app = new Vue({
  el: '#app',
  data: {
    array: [{n_seri:'001','n_comp':'00000001',producto:'agua'},
            {n_seri:'001','n_comp':'00000001',producto:'gaseosa'},
            {n_seri:'002','n_comp':'00000002',producto:'leche'},
            {n_seri:'001','n_comp':'00000003',producto:'agua'},
            {n_seri:'003','n_comp':'00000004',producto:'cafe'},
            {n_seri:'004','n_comp':'00000004',producto:'gaseosa'}]
  }
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div id="app">
  <table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Serie</th>
      <th scope="col">Comprobante</th>
      <th scope="col">Cliente</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(a,index) in array" :class="a.n_comp != (Object.assign({}, array[index+1])).n_comp ? 'bg-dark' : ''">
      <th v-text="index + 1"></th>
      <td v-text="a.n_seri"></td>
      <td v-text="a.n_comp"></td>
      <td v-text="a.producto"></td>
    </tr>
  </tbody>
</table>
</div>

he estado tratando de la siguiente manera pero no lo consigo, si me pudieran ayudar les agradecería mucho

1 respuesta 1

2

Dentro del ciclo va a ser muy complicado poder agrupar filas que repiten un valor, porque necesitas dos variables:

  • Una para almacenar el último valor mostrado y saber si debe agrupar con el elemento actual
  • Otra para la clase, cada que haya un cambio de valor, también debe haber cambio de clase

Puedes crear un objeto personalizado para esas variables y acceder con this.$options.nombreDePropiedad que vas a usar en un método para saber qué clase usar en cada elemento.

Vue.config.productionTip = false;
Vue.config.devtools = false
var app = new Vue({
  el: '#app',
  data: {
    array: [{n_seri:'001','n_comp':'00000001',producto:'agua'},
            {n_seri:'001','n_comp':'00000001',producto:'gaseosa'},
            {n_seri:'002','n_comp':'00000002',producto:'leche'},
            {n_seri:'001','n_comp':'00000003',producto:'agua'},
            {n_seri:'003','n_comp':'00000004',producto:'cafe'},
            {n_seri:'004','n_comp':'00000004',producto:'gaseosa'}]
  },
  // Definir propiedades no reactivas, solo para uso local
  // Tú decides el nombre que le das al objeto
  local: {
      lastValue: '',  // Almacenar el último valor de n_comp
      lastClass: '',  // almacenar última clase usada
  },
  methods: {
      // Crear función para saber qué clase aplicar
      getClass: function(value) {
          // Si el valor actual no es igual al último mostrado, cambiar clase
          if(value != this.$options.local.lastValue) {
              // Actualizar último valor mostrado
              this.$options.local.lastValue = value;
              // Cambiar entre 'bg-dark' y cadena vacía, actualizando última clase 
              this.$options.local.lastClass = (this.$options.local.lastClass == '') ? 'bg-dark' : '';
          }
          // Devolver clase correspondiente
          return this.$options.local.lastClass;
      }
  }
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div id="app">
  <table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Serie</th>
      <th scope="col">Comprobante</th>
      <th scope="col">Cliente</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(a,index) in array" :class="getClass(a.n_comp)">
      <th v-text="index + 1"></th>
      <td v-text="a.n_seri"></td>
      <td v-text="a.n_comp"></td>
      <td v-text="a.producto"></td>
    </tr>
  </tbody>
</table>
</div>

3
  • deseo aplicar el estilo a los grupos por n_comp, sin importar que n_seri tenga, con el efecto cebra, primer grupo con el estilo, el siguiente no, el siguiente con estilo el 10 ago. 2021 a las 19:17
  • @FredyAlarconOrdoñez, actualicé la respuesta para agrupar por n_comp.
    – Triby
    el 10 ago. 2021 a las 20:03
  • gracias, justos lo que necesitaba el 10 ago. 2021 a las 20:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.