0
295
Vistas¿Cómo especificar pesos de columna editables en v-data-table?
Tengo una tabla similar como muestra la siguiente captura de pantalla:
Lo que me gustaría lograr es asignar un peso a cada columna numérica dentro de esta tabla, es decir, a las columnas llamadas "Calorías", "Grasas", "Carbohidratos", "Proteínas" y "Hierro". Para ser más concretos, debería ser posible ingresar un peso en una fila de encabezado separada (esto debe dejarse al usuario de la tabla, es decir, debe ser editable) con el cual los valores de la columna se multiplican y luego se suman a una suma ponderada. en una columna aparte.
Consulte el siguiente rayado para obtener más aclaraciones.
¿Es posible lograr esto con v-data-table? ¿Alguien puede proporcionar orientación o incluso un MWE para una fila de encabezado editable con la que hacer una suma ponderada de los datos de la tabla numérica?
1 Respuestas
Responde la pregunta0
puede agregar una fila adicional antes de los datos reales con la ranura: body.prepend
Su plantilla podría verse así:
<div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1"> <template #body.prepend> <tr class=""> <td class="text-start"></td> <td class="text-start"><input class="red--text" value=1></td> <td class="text-start"><input class="red--text" value=1></td> <td class="text-start"><input class="red--text" value=1></td> <td class="text-start"><input class="red--text" value=1></td> <td class="text-start"><input class="red--text" value=1></td> </tr> </template> </v-data-table> </v-app> </div>Lápiz de código: https://codepen.io/florent-bouisset/pen/QWaRqOy?editors=1010
Debería poder vincular la entrada a los datos y calcular la última columna que desea