¿Cómo puedo crear un componente de tabla Vue con slots de columna?
Actualmente estoy trabajando en un proyecto de Vue (Vue 2) relativamente grande que utiliza muchas tablas, y quiero crear un componente de tabla reutilizable donde cada columna sea un componente hijo / slot. Algo como esto:
<table :data="data">
<tablecolumn field="id" label="ID"></tablecolumn>
<tablecolumn field="name" label="Nombre"></tablecolumn>
<tablecolumn field="date_created" label="Creado"></tablecolumn>
</table>
const data = [
{ id: 1, name: 'Foo', date_created: '01.01.2021' },
{ id: 2, name: 'Bar', date_created: '01.01.2021' }
];
Lo cual a su vez debería generar esto:
<table>
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Creado</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Foo</td>
<td>01.01.2021</td>
</tr>
<tr>
<td>2</td>
<td>Bar</td>
<td>01.01.2021</td>
</tr>
</tbody>
</table>
Anteriormente hemos utilizado Buefy, pero el tamaño del proveedor se vuelve innecesariamente grande, ya que solo usamos una fracción de la funcionalidad de los componentes, así que quiero crear una alternativa liviana.
davy.ai
Para crear un componente de tabla reutilizable con componentes hijos para cada columna en un proyecto Vue 2, sigue estos pasos:
TableColumn.vue
para cada columna de la tabla. Esto se puede hacer usando el métodoVue.component
para registrar un nuevo componente:Aquí, definimos las propiedades
field
ylabel
que se pasarán desde el componente padre (Table
). La sección detemplate
define la plantilla HTML del encabezado de la columna.Table
, que será el componente padre que renderiza la tabla. En este componente, usaremos la directivav-for
para iterar sobre los componentes hijosTableColumn
, y la directivav-bind
para pasar las propiedadesfield
ylabel
:Aquí, definimos la propiedad
data
, que será un arreglo de objetos que representan los datos que se mostrarán en la tabla. En la sección de plantilla, usamos la directivav-for
para iterar sobre los componentes hijosTableColumn
y renderizar un encabezado para cada columna.También usamos la directiva
v-for
para iterar sobre cada elemento endata
y renderizar una fila para cada elemento. Dentro de cada fila, usamos nuevamentev-for
para iterar sobre cada columna y renderizar el valor de los datos correspondientes.La sección
computed
contiene una propiedadcolumns
, que extrae las definiciones de columna de los componentes hijos usando la propiedad$slots
. Esto nos permite definir los encabezados de columna y los valores de datos en los componentes hijos, lo que hace que el componenteTable
sea muy flexible y reutilizable.Table
en tu aplicación Vue pasando las propiedadesdata
y los componentes hijosTableColumn
:En este fragmento de código, definimos la variable
data
como un arreglo de objetos que representan los datos que se mostrarán en la tabla. Luego, usamos el componente<table>
y pasamos la propiedaddata
, así como tres componentes hijos<tablecolumn>
, cada uno con sus propiedadesfield
ylabel
definidas.La salida de este código sería una tabla con tres columnas (ID, Name y Created) y dos filas de datos. El componente
Table
es completamente reutilizable y personalizable, lo que te permite definir cualquier número de columnas y valores de datos en los componentes hijos.