如何在 Vue 的 ant-table 中显示数据？答案

【问题标题】：How to display data inside ant-table in Vue?如何在 Vue 的 ant-table 中显示数据？
【发布时间】：2021-12-19 15:23:37
【问题描述】：

我是 vue.js 和 ant-design 组件的新手。我有一个对象数组，我必须在表格中显示哪些字段。我的问题是我无法在每一行中获取特定字段的值（== 我的数据源数组中的索引）。我该怎么做？谢谢

代码：

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

【问题讨论】：

标签： javascript vue.js antd

【解决方案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 获取数据源的当前项并操作当前实例，提供对我对象的所有字段的访问。可能是我弄错了。

【讨论】：