Saltar al contenido

Hacer invisible la columna ‘Id’ de bootstrap-vue b-table

Solución:

Mi solución rápida para esto sería así:

fields: Array<any> = [
        {key: 'Id', thClass: 'd-none', tdClass: 'd-none' },
        {key: 'LastName', sortable: true},
        {key: 'FirstName', sortable: true},
        etc.....
    ];

Así que para Id uso thClass: ‘d-none’, tdClass: ‘d-none’.

Esto es similar a la respuesta de Latovic, pero usando .d-none

fields: Array<any> = [
    {key: 'Id', thClass: 'd-none', tdClass: 'd-none' },
    {key: 'LastName', sortable: true},
    {key: 'FirstName', sortable: true},
    etc.....
];

La razón por la que quieres usar .d-none es porque ya está integrado en Bootstrap 4.

Ver: https://getbootstrap.com/docs/4.1/utilities/display/

Todo lo que necesitas hacer es no incluido es en el fields definición. Los datos de la fila de elementos seguirán estando allí y se podrá acceder a ellos a través de ranuras con alcance desde otros campos.

No es necesario utilizar clases de CSS para ocultar la columna.

Para acceder al valor a través de otro espacio de ámbito de campo (diga el LastName espacio):

<b-table :fields-"fields" :items="items" ... >
  <template slot="LastName" slot-scope="{ value, item }">
    <!-- value is the field value -->
    {{ value }}
    <!-- item is the entire row object -->
    <!--you can use it for actions on buttons, etc -->
    <b-button @click="doSomthing(item.Id)">{{ item.Id }}</b-button>
  </template>
</b-table>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *