He heredado el código vue de otra persona que usa vue-tables-2. La tabla se ve así (muy, muy simplificada)...
<v-client-table :data="myRows" :columns="columns" :options="options"> <div slot="columnA" slot-scope="{row}"> <input type="text" v-model.trim="row.someKey" class="form-control"> </div> <div slot="etc"> ... Observe cómo dice slot-scope="{row}" , en lugar de slot-scope="row" . Mientras inspecciono las filas, encuentro que cada fila se ve así...
{ row: { keyA: value, keyB: value, etc }, index: 1 }, { row: { keyA: value, keyB: value, etc }, index: 2 }, etc Así que supongo que el autor original "destruyó" la fila para evitar desperdiciar pulsaciones de teclas, como en v-model.trim="row.row.someKey" .
Ahora estoy agregando una nueva columna que usa la fila y el índice de matriz de los datos de la fila, así...
<div slot="columnZ" slot-scope="row"> <p>col value is {{row.row.someOtherKey}} and index is {{row.index-1}}<p> </div> Pero no me gusta más row.row que el autor original, y la row.index . índice se da en números de conteo, no en el índice de matriz basado en cero.
Supongo que vue-tables-2 es la fuente de ambos problemas. ¿Hay alguna manera de que pueda usar el paquete pero solo obtener los datos de la fila sin tenerlos envueltos en otra "fila", y hay alguna manera de que pueda obtener un índice de matriz basado en cero por fila?
¿Hay alguna manera de que pueda usar el paquete pero solo obtenga los datos de la fila sin tenerlos envueltos en otra "fila"?
Si y no. Los accesorios de ranura (cualquier cosa que el componente comparta con su ranura) siempre se comparten como un solo objeto. Usted es quien le da el nombre a la variable.
Entonces, en el caso de slot="columnZ" slot-scope="row" (que, por cierto, es una sintaxis obsoleta ; la sintaxis actual es v-slot:columnZ="row" )
row , puede ser props o cualquier otra cosa{ row: { keyA: value, keyB: value, etc }, index: 1 } (asumiendo) Pero puede desestructurar el objeto en componentes - v-slot:columnZ="{ row, index }"
Esta es la misma operación que en JS simple:
const obj = { row: { keyA: 1, keyB: "asdasd", }, index: 1 } // here the names `row` and `index` are given by the names of 1st level properties const { row, index } = obj console.log(row) console.log(index) // it is possible to "rename" te variable const { row: user } = obj console.log(user)En cuanto al índice de base cero faltante, si esto es lo que el componente comparte con la ranura, es muy poco lo que puede hacer al respecto. El componente tiene el control. Si realmente lo necesita, simplemente agregue una clave más en cada fila que contenga un índice basado en cero