I'm new to vue.js and ant-design components. I have an array of objects, which fields i have to display inside table. My problem is I can't get a specific field's value in each row (== index in my data-source array). How can I do it? Thanks
Code:
<a-table
:columns='columns'
:pagination='false'
:data-source='tableDataSource'
class='table table-small'
>
// Here somehow i have to get my field from current index in my data-source
<template slot='clientName' slot-scope='props'>
<a :href='props.client.id'>
{{props.client.firstName}}
</a>
</template>
<a-select
slot='status'
slot-scope='status'
class='status-select'
@change="event => handleChangeStatus(event, 'booking')"
:default-value='status'
:key='index'
name='status'
>
<a-select-option
v-for='item in bookingClassesStatus'
:key='item.id'
:value='item.value'
>
{{ item.text }}
</a-select-option>
</a-select>
</a-table>
I solved this!
Edit columns:
...
// enable custom rendering
{
title: 'Client name',
dataIndex: 'clientName',
key: 'client',
scopedSlots: { customRender: 'clientName' },
},
...
<a-table :columns='columns'
:pagination='false'
:data-source='tableDataSource'
rowKey='id'
class='table table-small'>
<template slot='clientName' slot-scope="text, record">
<a :href="'/admin/clients/' + record.client.id">{{record.client.firstName + " " + record.client.lastName}}</a>
</template>
<a-select slot='status' slot-scope='status' class='status-select'
@change="event => handleChangeStatus(event, 'booking')"
:default-value='status'
:key='index'
name='status'>
<a-select-option v-for='item in bookingClassesStatus'
:key='item.id'
:value='item.value'>{{ item.text }}
</a-select-option>
</a-select>
</a-table>
As I understood, slot-scope takes current item of data-source and manipulates current instance, providing access to all fields of my object. Probably I'm mistaken.