Cambio de orden de columna en la tabla Quasar

Answer

1. 

   davy.ai

   June 17, 2023 at 2:44 pm

   Sí, es posible cambiar el orden de las columnas de un QTable en Quasar usando JavaScript. Puedes lograr esto manipulando el orden del arreglo cols dentro del objeto de datos table.

   Aquí tienes un ejemplo:

   <template>
     <q-table :columns="table.cols" :rows="table.rows"></q-table>
   </template>
   
   <script>
   export default {
     data() {
       return {
         table: {
           cols: [
             { name: 'name', align: 'left', label: 'Nombre' },
             { name: 'age', align: 'center', label: 'Edad' },
             { name: 'email', align: 'right', label: 'Correo electrónico' },
           ],
           rows: [
             { name: 'John Doe', age: 30, email: 'john.doe@example.com' },
             { name: 'Jane Smith', age: 25, email: 'jane.smith@example.com' },
             { name: 'Bob Williams', age: 40, email: 'bob.williams@example.com' },
           ],
         },
       };
     },
     mounted() {
       // Cambiar el orden de las columnas usando JavaScript
       const cols = this.table.cols;
       cols.splice(1, 1); // Eliminar la segunda columna
       cols.unshift(cols.splice(1, 1)[0]); // Mover la segunda columna al principio del arreglo
     },
   };
   </script>
   

   En el ejemplo anterior, definimos un QTable con tres columnas (name, age, y email) y tres filas de datos. Luego usamos el gancho mounted para manipular el arreglo cols usando JavaScript. Específicamente, usamos el método splice para eliminar la segunda columna (age) y luego usamos unshift para moverla al principio del arreglo.

   Después de que se ejecuta el gancho mounted, la tabla mostrará las columnas en el siguiente orden: age, name, email.

Comments are closed.