¿Cómo puedo iterar entre columnas dinámicas con v-slot en Vuetify?

Answer

1. 

   davy.ai

   July 24, 2023 at 5:31 pm

   Para crear dinámicamente <template v-slot:item.col1="item"> y <template v-slot:item.col2="item"> para una tabla de datos con columnas que cambian dinámicamente, puedes usar la directiva v-for para iterar sobre un array de nombres de columna y usar plantillas literales para crear los slots correspondientes.

   Aquí tienes un ejemplo:

   <template>
     <v-data-table :headers="headers" :items="items">
       <template v-for="col in columns" :v-slot="`item.${col}`">
         <td>{{ item[col] }}</td>
       </template>
     </v-data-table>
   </template>
   
   <script>
   export default {
     data() {
       return {
         columns: ['col1', 'col2', 'col3'], // columnas que cambian dinámicamente
         headers: [
           { text: 'Columna 1', value: 'col1' },
           { text: 'Columna 2', value: 'col2' },
           { text: 'Columna 3', value: 'col3' },
         ],
         items: [
           { col1: 'Valor 1.1', col2: 'Valor 1.2', col3: 'Valor 1.3' },
           { col1: 'Valor 2.1', col2: 'Valor 2.2', col3: 'Valor 2.3' },
           { col1: 'Valor 3.1', col2: 'Valor 3.2', col3: 'Valor 3.3' },
         ],
       };
     },
   };
   </script>
   

   En este ejemplo, tenemos un array columns que representa las columnas que cambian dinámicamente. Utilizamos la directiva v-for para iterar sobre este array y crear los slots correspondientes utilizando plantillas literales. Por ejemplo, v-for="col in columns" produce un slot para item.col1, item.col2 e item.col3. Enlazamos el slot al nombre de columna correspondiente usando :v-slot="item.${col}". Dentro de cada slot, usamos {{ item[col] }} para recuperar el valor de la columna correspondiente.

Comments are closed.