Actualmente estoy trabajando con un proyecto Vue (Vue 2) relativamente grande que usa muchas tablas, y quiero crear un componente de tabla reutilizable donde cada columna sea un componente/ranura secundario. Algo como esto:
<Table :data="data"> <TableColumn field="id" label="ID" /> <TableColumn field="name" label="Name" /> <TableColumn field="date_created" label="Created" /> </Table> const data = [ { id: 1, name: 'Foo', date_created: '01.01.2021' }, { id: 2, name: 'Bar', date_created: '01.01.2021' } ];Que a su vez debería generar esto:
<table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Created</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 usamos Buefy, pero el tamaño del proveedor se vuelve innecesariamente grande, ya que solo usamos una fracción de la funcionalidad de los componentes, por lo que quiero crear una alternativa liviana.
Con estos datos solo necesitas 2 Props, etiquetas y datos.
<!-- Component --> <table> <thead> <tr> <td v-for="(label, labelIndex) in labels" :key="labelIndex"> {{ label.text }} </td> </tr> </thead> <tbody> <tr v-for="(item, itemIndex) in data" :key="itemIndex"> <td v-for="(label, labelIndex) in labels" :key="labelIndex"> {{ item[label.field] }} </td> </tr> </tbody> </table> // Data and labels const labels = [ { text: ID, field: id }, { text: Name, field: name }, { text: Created, field: date_created }, ] const data = [ { id: 1, name: 'Foo', date_created: '01.01.2021' }, { id: 2, name: 'Bar', date_created: '01.01.2021' } ]; <table-component :labels="labels" :data="data" > </table-component>Si necesita algo más complejo, puede usar componentes anidados combinados con ranuras con nombre para el encabezado o pie de página de la tabla (u otras opciones como la búsqueda).