如何在Vue中显示ant表中的数据

Question

我是vue.js和ant设计组件的新手。我有一个对象数组，我必须在表中显示这些字段。我的问题是，我无法在每一行中获得特定字段的值(==数据源数组中的索引(。我该怎么做？感谢

代码：

<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>

Answer 1

我解决了这个问题！

编辑列：

...
// 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>

正如我所理解的，slot-scope获取数据源的当前项并操纵当前实例，从而提供对我的对象的所有字段的访问。也许我错了。