Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

159
Vistas
js Tabulador desencadenar evento en la selección de casilla de verificación vue3js

Estoy usando Vue3 y Tabulator (5.2.7) para obtener una tabla de datos. Estoy usando la API de composición.

Estoy omitiendo un código irrelevante en los bits a continuación.

 //DataTable.vue <script setup> import { TabulatorFull as Tabulator } from 'tabulator-tables'; import { useDataStore } from '@/stores/DataStore.vue'; import { ref, reactive, onMounted } from 'vue'; const store = useDataStore(); //get data from state manager // this is as per the tabulator docs w/vue const table = ref(null); const tabulator = ref(null); const tableData = reactive(store.getData); onMounted(() => { tabulator.value = new Tabulator(table.value, { layout: "fitDataTable", data: tableData, reactiveLayout: true, responsiveLayout: true, selectable: 1, // be able to select only 1 row at a time columns: [ {formatter: "rowSelection", titleFormatter: "rowSelection", headerSort: false, cellClick: function(e, cell) { const r = cell.getRow(); console.log(r._row.data); } // some more data but its just regular title/field assoc. ] } } </script> <template> <div ref="table"></div> </template>

Desafortunadamente no puedo compartir capturas de pantalla, pero tengo una imagen: ingrese la descripción de la imagen aquí

Entonces, lo que quiero que suceda es que cuando marque la casilla de verificación (área roja), la consola registrará los datos (y eventualmente hará otras cosas). Cuando hago clic en el área verde (resto de la celda), lo hace, además de seleccionar la fila. Cuando hago clic en la casilla de verificación, no lo hace. La fila está seleccionada, pero no registra ni activa ninguna función.

He intentado pasar los detectores de eventos y las devoluciones de llamada documentados ( http://tabulator.info/docs/5.2/events#row ), pero cada vez que intento hacer un table.on() , como table.on("rowDblClick", () => {return 1}) me da un error de que table.on no es una función, y los detectores de eventos de fila se eliminaron en 5.0.

La única razón por la que estoy usando Tabulator es porque Vuetify aún no funciona con Vue3 (todavía está en versión beta, si mal no recuerdo), y encontré esto en mis búsquedas de Google.

EDITAR: Alternativamente, si alguien sabe cómo hacer que funcionen los detectores de eventos incorporados o los parámetros de devolución de llamada de rowClick , esa sería una solución aceptable.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda