Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

210
Views
¿Cómo crear una barra de progreso similar a un intercambio detrás de los elementos de la tabla de datos? [Vue/Vuetificar]

Estoy haciendo un simulador de libro de cambio para algunas criptomonedas, y necesito hacer la barra de progreso que esta detras de los valores de una tabla.

ingrese la descripción de la imagen aquí

Mi tabla de datos que recibe los datos tiene la siguiente plantilla:

 <v-data-table :headers="headers_ask" :items="book_item[1]" class="transparent data-table-books-asks ml-3 mr-3" > <template v-slot:item="{item}"> <tr> <td>{{item.ask}}</td> <td>{{item.quantity}}</td> </tr> </template> </v-data-table>

¿Cómo puedo crear esta barra de progreso en los elementos de la tabla de datos sin afectar el diseño de la plantilla? Nota: si creo un div u otra etiqueta entre esa plantilla, los elementos no coinciden con el encabezado

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Lo hice usando una propiedad de fondo en los elementos de la plantilla:

 <tr :style="{'background-image': 'linear-gradient(to left, rgba(255, 59, 105, 0.25), rgba(255, 59, 105, 0.25) '+item.percentage+'%, rgba(0, 0, 0, 0) '+item.percentage+'%)'}"> <td class="text-start items-ask">{{item.ask}}</td> <td class="text-center items-quantity">{{item.quantity}}</td> </tr>

¡Gracias amigos!

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!