Home » vue » How to display data inside ant-table in Vue?

How to display data inside ant-table in Vue?

Posted by: admin November 26, 2021 Leave a comment

Questions:

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

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.