Создание таблицы с использованием вложенного объекта в Quasar - PullRequest
Новая
       8

Создание таблицы с использованием вложенного объекта в Quasar

1 голос
/ 11 марта 2020

Я использую Quasar для создания Q-таблиц и не могу заставить его работать, используя вложенные объекты с динамическими c именами ключей. Вот содержимое моей таблицы: 

      data: [
        {
          'FrozenYogurt' : {
            'topping': 'strawberry'
          }
        },
        {
          'IceCreamSandwich' : {
            'baseFlavor': 'chocolate'
          }
        },
        {
          'CreamPuff' : {
            'sourceBakery': 'Starbucks'
         }
      ]

И мои столбцы: 

      columns: [
        {
          name: 'key',
          required: true,
          label: 'Property',
          align: 'left',
          field: row => row.name,
          format: val => `${val}`,
          sortable: true
        },
        { name: 'key.key', align: 'center', label: 'Property', field: 'key', sortable: true },
        { name: 'key.value', label: 'Value', field: 'key.value', sortable: true, style: 'width: 10px' },
      ],

Итак, в этом случае я хочу, чтобы таблица выглядела следующим образом: 

Product          Property      Value

FrozenYogurt     topping       strawberry
IceCreamSandwich baseFlavor    chocolate
CreamPuff        sourceBakery  Starbucks

Вот мой vue файл: 

    <q-table
      :data="data"
      :columns="columns"
      row-key="key"
      binary-state-sort
    >
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="key" :props="props">
            {{ props.key }}
            <q-popup-edit v-model="props.key">
              <q-input v-model="props.row.key" dense autofocus counter></q-input>
            </q-popup-edit>
          </q-td>
          <q-td key="key.key" :props="props">
            {{ props.key.key }}
            <q-popup-edit v-model="props.key.key" title="Update Property" buttons>
              <q-input v-model="props.key.key" dense autofocus></q-input>
            </q-popup-edit>
          </q-td>
          <q-td key="key.value" :props="props">
            <div class="text-pre-wrap">{{ props.key.value }}</div>
            <q-popup-edit v-model="props.key.value">
              <q-input type="textarea" v-model="props.key.value" dense autofocus></q-input>
            </q-popup-edit>
          </q-td>
        </q-tr>
      </template>
    </q-table>

Конечно, мой vue файл выглядит неправильно. Но я не уверен, как получить доступ к именам / значениям ключа объекта.

это возможно ??

Большое спасибо!

1 Ответ

0 голосов
/ 11 марта 2020

Просто создайте вычисляемое свойство, которое возвращает данные в вашем формате. 

  computed:{

  getData(){

    return this.data.map(function(item){
      console.log(item)
      return {name:Object.keys(item)[0],Property:Object.keys(item[Object.keys(item)[0]])[0],Value:Object.values(item[Object.keys(item)[0]])[0]}
    })
  }
}

Рабочая кодовая ручка - https://codepen.io/Pratik__007/pen/RwPQgNr?editors=1010

...