0
259
Views¿Cómo generar números de fila (1, 2, 3, ...) cuando vincula la tabla personalizada a la matriz?
Tenemos un proyecto Vue.js con una tabla personalizada vinculada a una matriz. Se ve como sigue:
La parte clave del código HTML tiene el siguiente aspecto:
<InfiniteScroll ref="scroller" :disable="finished" @load="onLoad"> <swipeable-table v-if="waitingList.length" :headers="headers" :items="waitingList" :loading="loading" custom-width outerBorder > <template slot="rows" slot-scope="{ item: booking }"> <tr> <td>{{ 0 }}</td> <td></td> <td></td> <td>{{ fullName(booking.user) }}</td> <td>{{ unitName(booking.search_by) }}</td> ... </tr> </template> </swipeable-table> ... </InfiniteScroll> La lista de waitingList es una matriz de objetos.
La parte del código JavaScript tiene el siguiente aspecto:
methods: { fullName(user) { return fullName.by(user, null, true) }, unitName(unit) { return unit?.name ?? '' }, ...La tabla se puede desplazar, es decir, muestra 30 elementos al principio y después de desplazarse los siguientes 30 elementos (30+30=60) y así sucesivamente.
La matriz de objetos se ve de la siguiente manera:
¿Hay alguna forma de usar algún método de JavaScript para lograrlo? Si no, ¿cómo puedo hacerlo?
·
Juan Pablo Isaza
1 answers
Answer question0
puede agregar índice de la misma manera que el elemento en la plantilla.
<template slot="rows" slot-scope="{ item: booking,index:index }"> <tr> <td>{{ index }}</td> <td></td> <td></td> <td>{{ fullName(booking.user) }}</td> <td>{{ unitName(booking.search_by) }}</td> ... </tr> </template>
·
Juan Pablo Isaza
Report
Answer question