Tabla Bootstrap Vue: muestra detalles cuando se hace clic en la fila

21

Tratando de lograr una experiencia diferente a la de la documentación: mostrar los detalles de la fila no haciendo clic en el botón, sino cuando se hace clic en la fila. Y la documentación es una falta de detalles sobre cómo hacerlo diferente, como en los ejemplos.

<b-table
    v-if="tableIsReady"
    :items="deals"
    :fields="fields" 
    :per-page="recordsPerPage"
    no-local-sorting 
    @sort-changed="sorting" 
    responsive 
    flex 
    striped 
    hover
    @row-clicked="expandAdditionalInfo" 
  > 
   <template slot="row-details" slot-scope="row">
    <b-card>
      <h1>hello</h1>
    </b-card>
  </template>
 </b-table>

Esta es mi función, pero creo que no funciona en absoluto.

expandAdditionalInfo(row) {
  row.showDetails();
}
4
  • 1
    Puede que no sea el único problema, pero que se está perdiendo ()en su row.showDetails, por lo que debería ser row.showDetails(). 14 de septiembre de 2018 a las 8:11
  • Jesucristo. Derecha. aún showDetails no es una función 14 de septiembre de 2018 a las 8:58
  • Esta pregunta podría ayudar. 14 de septiembre de 2018 a las 9:07
  • proporcione la estructura de la dealsmatriz u objeto 14/09/18 a las 11:55
14

Como se menciona en la sección de soporte de detalles de fila de la documentación de la tabla Bootstrap Vue, puede cambiar la _showDetailspropiedad del elemento de fila:

If the record has it's _showDetails property set to true, and a row-details scoped slot exists, a new row will be shown just below the item, with the rendered contents of the row-details scoped slot.

En su caso, querría algo como:

expandAdditionalInfo(row) {
  row._showDetails = !row._showDetails;
},

Como se demuestra en este codepen

5
  • ¿Hay alguna forma directa de ocultar todas las demás filas que muestran los detalles?
    Anand
    8/11/18 a las 14:36
  • 2
    @Anand La mejor opción que se me ocurre es iterar sobre todas las filas, comparar cada fila con la fila que desea mostrar (por ejemplo, con una ID única) y establecer _showDetails en verdadero para la fila deseada y falso para todas las demás. No conozco ninguna funcionalidad incorporada que pueda manejar esto por usted.
    Tomhah
    11/11/18 a las 9:42
  • Se aconseja en los documentos de Boostrap.Vue que es mejor usar la función toggleDetails, en lugar de modificar la propiedad directamente. 30/09/19 a las 17:09
  • 1
    ¿Es esto para una versión particular de BV? No me funciona en la v2.2. row._showDetails = !row._showDetailsno hace nada y row.toggleDetails()arroja "no una función". 13/01/20 a las 22:35
  • ¿La _showDetailspropiedad ya existe en los datos de su artículo antes de intentar cambiarla? La documentación menciona que la propiedad ya debe existir antes de que intente alternarla debido a limitaciones con la reactividad de Vue: bootstrap-vue.js.org/docs/components/table/#row-details-support . Esta respuesta fue escrita para un candidato de lanzamiento anterior de BV, sin embargo, el codepen que vinculé está ejecutando la última versión y todavía está funcionando.
    Tomhah
    14/01/20 a las 23:10
20

Difícil de encontrar ... pero solo agregue esto:

@row-clicked="item=>$set(item, '_showDetails', !item._showDetails)"

Explicación

La $setconserva la reactividad incluso si _showDetailsno existiera.

Es una lástima que el objeto de fila no sea accesible, por lo que toggleDetails no es una opción aquí.

3
  • @estani: impresionado por tu vue-fu (de kung-fu). esto de hecho funciona. -> @Jay: intente usar la ranura de la siguiente manera <template slot="row-details" slot-scope="row">id: {{ row.id }}</template>-> no (!) Funciona con las ranuras que usan esta sintaxis <template v-slot:row-details="row">id: {{ row.id }}</template>(al menos por el momento ...)
    udo
    23 abr.20 a las 13:30
  • ¡Brillante! ¡Gracias! 1 de mayo de 2020 a las 17:42
  • ¡Trabajó! ¡Gracias!
    iEunoia
    22 feb a las 13:01