I have this <q-table>
<q-table
:grid="$q.screen.xs"
:title="showTitle ? 'Payables' : ''"
:data="payables"
:columns="columns"
:visible-columns="visibleColumns"
:rows-per-page-options="[5,10,15]"
row-key="id"
:pagination.sync="pagination"
:loading="loading"
@request="request"
>
<template v-slot:body-cell-from="props">
<q-td :props="props">
<template v-if="props.row.fromAccount">
<router-link :to="{name:'account', params: {accountId: props.row.fromAccount.id}}">
{{ props.row.fromAccount.name }}
</router-link>
</template>
<template v-if="props.row.fromPartner">
<router-link :to="{name: 'partner', params: {partnerId: props.row.fromPartner.id}}">
{{ props.row.fromPartner.name}}
</router-link>
</template>
</q-td>
</template>
<template v-slot:body-cell-to="props">
<q-td :props="props">
<template v-if="props.row.toAccount">
<router-link :to="{name:'account', params: {accountId: props.row.toAccount.id}}">
{{ props.row.toAccount.name }}
</router-link>
</template>
<template v-if="props.row.toPartner">
<router-link :to="{name: 'partner', params: {partnerId: props.row.toPartner.id}}">
{{ props.row.toPartner.name}}
</router-link>
</template>
</q-td>
</template>
</q-table>
columns: [
{
name: 'id',
field: 'id',
label: 'Id',
sortable: false,
align: 'left'
},
{
name: 'orderId',
field: 'orderId',
label: 'Order ID',
sortable: false,
align: 'left',
format: (val) => `${val.substr(0, 8)}...`
},
{
name: 'from',
field: obj => obj,
label: 'From',
sortable: false,
align: 'left',
},
{
name: 'to',
field: obj => obj,
label: 'To',
sortable: false,
align: 'left',
},
{
name: 'fromAmount',
field: obj => obj,
label: 'From Amount',
sortable: true,
align: 'left',
format: (val, row) => `${row.fromAmount} ${row.fromCurrency}`
},
{
name: 'toAmount',
field: obj => obj,
label: 'To Amount',
sortable: true,
align: 'left',
format: (val, row) => `${row.toAmount} ${row.toCurrency}`
},
{
name: 'type',
field: 'type',
label: 'Type',
align: 'left',
},
{
name: 'createdAt',
field: 'createdAt',
label: 'Created',
sortable: true,
align: 'left',
format: (val) => new Date(val).toLocaleString()
}
],
visibleColumns: ['orderId', 'from', 'to', 'fromAmount', 'toAmount', 'type', 'createdAt']
As you can see, I alter some of the columns by the format property, but for from and to I use the v-slot:body-cell-[name] slot for customization. The problem is when I activate grid, the columns which are customized using v-slot:body-cell-[name] show as undefined:
Is there a way to use the same slot for both table and grid mode? I know I can customize the whole item slot which is used for grid, but I was wondering if there’s an easier way.
