How to show dropdown for fields which are of type array in vue-good-table

Question

Is there a way in vue-good-table to show dropdown where-ever the data type is array?

Rows given below:

[
  {
    name: "test",
    fqdn: "test",
    SystemCustodianId: "test",
    SystemCustodianName: "test",
    freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
  },
  {
    name: "test",
    fqdn: "test",
    SystemCustodianId: "test",
    SystemCustodianName: "test",
    freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
  },
]

Columns given below:

[ 
      {
          label: "NAME",
          field: "name",
      },
      {
          label: "Platform Name",
          field: "fqdn",
      },
      {
          label: "System Custodian",
          field: "SystemCustodianName",
      },
      {
          label: "System Custodian ID",
          field: "SystemCustodianId",
      },
      {
          label: "Frequency",
          field: "frequency",
      }
    ]

score 1 · Accepted Answer · answered May 12 '21 at 17:48

you need to use the table-row slot. Here is the code

<template>
  <div id="app">
    <vue-good-table :columns="columns" :rows="rows">
      <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field == 'freqency'">
          <span style="font-weight: bold; color: blue">
            <select>
              <option
                v-for="(val, index) in props.formattedRow.freqency"
                :value="val"
                :key="props.column.field + ' ' + index"
              >
                {{ val }}
              </option>
            </select>
            {{ props.row.age }}
          </span>
        </span>
        <span v-else>
          {{ props.formattedRow[props.column.field] }}
        </span>
      </template>
    </vue-good-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      columns: [
        {
          label: "NAME",
          field: "name",
        },
        {
          label: "Platform Name",
          field: "fqdn",
        },
        {
          label: "System Custodian",
          field: "SystemCustodianName",
        },
        {
          label: "System Custodian ID",
          field: "SystemCustodianId",
        },
        {
          label: "Frequency",
          field: "freqency",
        },
      ],
      rows: [
        {
          name: "test",
          fqdn: "test",
          SystemCustodianId: "test",
          SystemCustodianName: "test",
          freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
        },
        {
          name: "test",
          fqdn: "test",
          SystemCustodianId: "test",
          SystemCustodianName: "test",
          freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
        },
      ],
    };
  },
};
</script>

Working sandbox

How to show dropdown for fields which are of type array in vue-good-table

1 Answers1