0
112
VistasVuetify v-chip en matriz de tabla de datos v
Soy nuevo en vuetificar, y me gustaria saber como hacer un v-chip a un valor especifico en mi tabla. ejemplo :
<v-data-table class="page__table" :headers="headers" :items="references" > <v-chip v-for="reference in references" :key="reference.id" :color="color" > {{reference.department}} </v-chip>y mi código (api de composición)
const mappedCatalog: ComputedRef<Record<string, any>> = computed(() => catalogStore.fullCatalog.map(reference => { return { ...reference, departments: reference.departments return { references: ref(mappedCatalog),Puedes ayudarme por favor
1 Respuestas
Responde la pregunta0
Verifique este codesanbox que hice: https://codesandbox.io/s/stack-71649799-v-chip-data-table-item-slow-z7p2db?file=/src/components/Example.vue
Puede utilizar la ranura de item de la tabla de datos. Algunos componentes de vuetify vienen con secciones especiales para facilitar la personalización denominadas ranuras, en este caso, la ranura de elementos de la tabla de datos le permite personalizar el contenido de columnas individuales de esta manera:
<v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1" > <template #item.calories="{ item }"> <v-chip dark color="red darken-2">{{ item.calories }}</v-chip> </template> <template #item.fat="{ item }"> <v-chip dark color="orange darken-2">{{ item.fat }}</v-chip> </template> </v-data-table> 
Si está utilizando es-lint, es posible que encuentre una advertencia que mencione algo sobre la regla de ranura en V válida, este es un falso positivo conocido sobre el que puede leer más en este hilo de problemas de GitHub , personalmente acabo de activar ese es-lint cerrar con una línea.
Para obtener más información sobre las ranuras de la tabla de datos, consulte la página de documentación de vuetify .