0👍
✅
The best solution will depend on how generic you need to make it. You could go all-in with a render
function but chances are you can achieve what you want just by tweaking the content of the slot.
For example, you could move the rendering of the table-row-options
into the template:
<template>
<tbody>
<tr v-for="item in data">
<td v-for="cell in cells">
<table-row-options
v-if="cell.key === 'option'"
...
/>
<template v-else>
{{ renderCell(item, cell) }}
</template>
</td>
</tr>
</tbody>
</template>
If you want to make this a bit more generic you could do something using v-bind
:
<template>
<tbody>
<tr v-for="item in data">
<td v-for="cell in cells">
<component
v-if="cell.content"
v-bind="cell.content(item)"
/>
<template v-else>
{{ renderCell(item, cell) }}
</template>
</td>
</tr>
</tbody>
</template>
In this case cell.content
would need to return a suitable object instead of a string, like this:
formatCells(){
return [
{ path: 'id', label: 'Id'},
{ path: 'date', label: 'Date'},
{ path: 'damage', label: 'Damage'},
{ key: 'option', content: purchase => ({ is: 'table-row-options', title: 'Options', ... })
]
}
Source:stackexchange.com