QTable grid undefined
-
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 forfrom
andto
I use thev-slot:body-cell-[name]
slot for customization. The problem is when I activategrid
, the columns which are customized usingv-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. -
cell
are different slot thanitem
which will be used for grid view. you will have to use the item slot if you want customization in it same like how you do on a normal table view.