在 Quasar 中使用嵌套对象创建 table

Question

我正在使用 Quasar 制作 Q 表，但无法使用具有动态键名的嵌套对象使其工作。这是我的 table 内容：

      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' },
      ],

所以在这种情况下，我希望 table 看起来像：

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 文件看起来不正确。但是我不确定如何访问对象键名/值。

这可能吗？？

非常感谢！

Answer 1

只需创建计算属性，return 就是您格式的数据。

  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

在 Quasar 中使用嵌套对象创建 table

Creating table using nested object in Quasar

javascript

vue.js

quasar