1

Llevo horas intentando insertar checkboxs en una tabla con Vue y me está resultando imposible. Estoy usando primeVue para los componentes y por mucho que leo la documentación de la DataTable me está resultando imposible comprenderla. Os paso una foto de lo que estoy intentando: Es en esa zona donde quiero los checkbox

Cada vez que inserto el componente RadioButton de primeVue o me lo pone arriba fuera de la tabla o abajo fuera de la tabla. Os paso el código por si os facilita la respuesta:

import Column from "primevue/column";
import DataTable from "primevue/datatable";
import { reactive } from "vue";
import Button from "primevue/button";
import RadioButton from "primevue/radiobutton";

const state = reactive<{
  tableItems: any[];
}>({
  tableItems: [],
});
setTimeout(() => {
  state.tableItems = [
    {
      policy: "Póliza",
      // eslint-disable-next-line sonarjs/no-duplicate-string
      name: "Nombre y Apellidos",
      age: "Edad",
      rol: "Rol",
      dni: "DNI",
    },
    {
      policy: "Póliza",
      name: "Nombre y Apellidos",
      age: "Edad",
      rol: "Rol",
      dni: "DNI",
    },
    {
      policy: "Póliza",
      name: "Nombre y Apellidos",
      age: "Edad",
      rol: "Rol",
      dni: "DNI",
    },
    {
      policy: "Póliza",
      name: "Nombre y Apellidos",
      age: "Edad",
      rol: "Rol",
      dni: "DNI",
    },
  ];
}, 2000);

function btnAlert() {
  alert("Abriendo!");
}
</script>

<template>
  <div id="app">
    <DataTable
      :value="state.tableItems"
      :paginator="true"
      :rows="10"
      :rowsPerPageOptions="[10, 25, 50]"
      paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
      currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
    >
      <Column field="policy" header="Póliza"></Column>
      <Column field="name" header="Nombre y Apellidos"></Column>
      <Column field="age" header="Edad"></Column>
      <Column field="rol" header="Rol"></Column>
      <Column field="dni" header="DNI"></Column>
    </DataTable>
    <RadioButton />
    <Button type="submit" :label="'Abrir Caso'" @click="btnAlert" />
  </div>
</template>

He intentado poner el componente RadioButton dentro de DataTable, en Column, dentro de Column... y nada.

4
  • ¿Intentase usando templating?
    – Marcos
    el 27 may. 2022 a las 12:39
  • Sí, pero sigue sin cogerme el componente RadioButton, lo que si me coge es un input type radio, pero eso no me sirve
    – vlexx
    el 27 may. 2022 a las 13:45
  • ¿Podrías editar tu pregunta y agregar el código que has intentado y no te funciona?
    – Marcos
    el 27 may. 2022 a las 14:15
  • 1
    Gracias por la ayuda Marcos, acabo de conseguirlo, comparto el código por si alguien se frustra igual que yo xD
    – vlexx
    el 27 may. 2022 a las 14:16

1 respuesta 1

1

Conseguido! Si alguien se atasca, comparto código. Era usando template pero creando una columna nueva, gracias a Marcos por contestar :)

<template>
  <div id="app">
    <DataTable
      :value="state.tableItems"
      :paginator="true"
      :rows="10"
      :rowsPerPageOptions="[10, 25, 50]"
      paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
      currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
    >
      <Column field="cuadro">
        <template #body="{ data }">{{ data.cuadro }}<RadioButton /></template>
      </Column>
      <Column field="policy" header="Póliza"></Column>
      <Column field="name" header="Nombre y Apellidos"></Column>
      <Column field="age" header="Edad"></Column>
      <Column field="rol" header="Rol"></Column>
      <Column field="dni" header="DNI"></Column>
    </DataTable>
    <Button type="submit" :label="'Abrir Caso'" @click="btnAlert" />
  </div>
</template>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.