Mostrar/Ocultar columna de tabla y guardar en localstorage en Vue

Answer

1. 

   davy.ai

   July 31, 2023 at 5:20 pm

   Para mostrar y ocultar columnas de una tabla de forma dinámica con una casilla de verificación y guardar la opción en el almacenamiento local en Vue 2, puedes utilizar la función de selección de columnas incorporada de Vue Tables 2 y utilizar el almacenamiento local de Vue para guardar las columnas seleccionadas. Así es como puedes implementarlo:

   1. Agrega una columna personalizada de casilla de verificación a la matriz tableOptions.columns:

   {
     title: 'Mostrar/Ocultar',
     name: '__checkbox:selected_columns',
     titleClass: 'centrado',
     dataClass: 'centrado',
     checked: true,
     disabled: true,
   }
   

   Esto agregará una columna de casilla de verificación a la izquierda de tu tabla, con el título ‘Mostrar/Ocultar’. Las columnas que deseas mostrar/ocultar tendrán su propiedad selected_columns establecida en true en los datos de la tabla.

   1. Agrega una propiedad computada para mapear los nombres de columna de los datos de la tabla a su estado de visibilidad:

   computed: {
     selectedColumns() {
       const seleccionadas = localStorage.getItem('selected_columns')
       return seleccionadas ? JSON.parse(seleccionadas) : {}
     },
   },
   

   Esto leerá el valor de selected_columns del almacenamiento local y lo parseará en un objeto. Si no se encuentra una selección previa, se devolverá un objeto vacío.

   1. Agrega un método para alternar la visibilidad de las columnas seleccionadas y guardar la selección en el almacenamiento local:

   methods: {
     toggleColumn(name) {
       const seleccionadas = this.selectedColumns
       if (seleccionadas[name]) {
         this.$refs.vuetable.showColumn(name)
         delete seleccionadas[name]
       } else {
         this.$refs.vuetable.hideColumn(name)
         seleccionadas[name] = true
       }
       localStorage.setItem('selected_columns', JSON.stringify(seleccionadas))
     },
   },
   

   Este método se llamará cuando se haga clic en la casilla de verificación en la columna ‘Mostrar/Ocultar’. Actualizará el objeto selectedColumns y llamará a showColumn o hideColumn en la referencia del componente vuetable para alternar la visibilidad de la columna seleccionada. Finalmente, guardará el objeto selectedColumns actualizado en el almacenamiento local.

   1. Modifica tu objeto tableOptions para incluir un responseAdapter y agregar la propiedad selected_columns a cada fila de datos:

   tableOptions: {
     ...
     responseAdapter(resp) {
       resp.data.forEach((fila) => {
         fila.selected_columns = true
       })
       return resp
     },
   },
   

   Esto asegurará que cada fila de datos tenga una propiedad selected_columns establecida en true de forma predeterminada.

   1. Vincula el método toggleColumn a la casilla de verificación en la columna ‘Mostrar/Ocultar’:

   {
     title: 'Mostrar/Ocultar',
     name: '__checkbox:selected_columns',
     titleClass: 'centrado',
     dataClass: 'centrado',
     checked: (name) => this.selectedColumns[name] || false,
     callback: (name) => this.toggleColumn(name),
   }
   

   Esto establecerá la casilla de verificación como marcada si la columna está actualmente visible y llamará al método toggleColumn con el nombre de la columna cuando se haga clic en la casilla de verificación.

   Con estos cambios, deberías poder mostrar y ocultar las columnas de tu tabla de forma dinámica, y cuando se recargue la página, la selección anterior se restaurará desde el almacenamiento local.

Comments are closed.