javascript - 如何在 vue-good-table 中显示数组类型字段的下拉列表

Question

vue-good-table 中有没有办法在数据类型为数组的地方显示下拉列表？

下面给出的行：

[
  {
    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"],
  },
]

下面给出的列：

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

        

Answer 1

您需要使用table-row插槽。这是代码

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

工作沙箱