Exportar a excel

/components/dna/excel-export/Index.vue

Con este complemento se puede realizar una exportación masiva de datos hacia un archivo xlsx. El componente recibe como parámetros principales un scheme y un proveedor de data (store action).

Forma de uso

<template>
  <div>
    <excel-export
      name="usuarios"
      :store-list="users/list"
      :scheme="scheme"
    />
  </div>
</template>

<script>
  import ExcelExport from '~/components/dna/excel-export/Index'
    
  export default {
    components: {
      ExcelExport,
    },
    data() {
      return {
        scheme: [
          { key: 'id', label: 'ID' },
          { key: 'name', label: 'Nombre' },
          { key: 'description', label: 'Descripción' },
          {
            key: 'comics',
            label: 'Comics',
            transform: (val) => val.comics.items.map((i) => i.name).join(', '),
          },
        ],
      }
    },
  }
</script>

Scheme

El esquema define las columnas y el tratamiento de la data que se va a exportar. El atributo scheme recibe un Array de objetos, cada objeto define una columna de la tabla, la estructura de cada objeto de este Array tiene los siguientes atributos:

Nombre	Tipo	Requerido	Descripción
key	string	si	Nombre de variable de la data retornada por el servidor
label	string	si	Texto que se muestra al usuario en el encabezado de la tabla
transform	function	no	Una función que permite modificar el valor que se despliega en la celda. Recibe como parámetro la fila entera y el retorno debe ser un string que finalmente se mostrará en la celda

Store list

De igual forma que en el componente de tablas asíncronas, para que se obtenga la data correctamente, es necesario que se construya una función que, por un lado, reciba correctamente los parámetros de: pagina, tamaño, y por otro lado devuelva un objeto con los atributos data (Array de objetos) y count (número total de resultados).

Es compatible usar la misma store action que para la tabla asíncrona.

Se requiere que la función reciba los parámetros de página y tamaño porque la data se obtiene en batchs de 200 filas para evitar timeouts del backend.

Tablas asíncronas