时间戳

首页 > 解决方案 > 如何在 Vue 的 ant-table 中显示数据？

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

问题描述

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

标签： javascriptvue.jsantd

解决方案

我解决了这个！

编辑列：

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

推荐阅读