包含从嵌套集合中的项动态创建的列的DataGrid

<template>
  <v-data-grid :items="nestedItems" :columns="dynamicColumns"></v-data-grid>
</template>

<script>
export default {
  data() {
    return {
      nestedItems: [
        { name: 'Item 1', details: { price: 10, quantity: 5 } },
        { name: 'Item 2', details: { price: 20, quantity: 3 } },
        { name: 'Item 3', details: { price: 15, quantity: 2 } }
      ],
      dynamicColumns: []
    };
  },
  created() {
    // 动态创建列
    this.dynamicColumns = Object.keys(this.nestedItems[0].details).map(key => ({
      label: key,
      field: key,
      sortable: true
    }));
  }
};
</script>