Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

161
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!