迭代 Vuetify v-data-table 中数据项的属性

Question

假设我有这样的桌子：

<template>
  <v-data-table :headers="headers" :items="items">
    <template v-slot:item.red="{ item }">
      <v-checkbox v-model="item.red"></v-checkbox>
    </template>
    <template v-slot:item.green="{ item }">
      <v-checkbox v-model="item.green"></v-checkbox>
    </template>
    <template v-slot:item.blue="{ item }">
      <v-checkbox v-model="item.blue"></v-checkbox>
    </template>
  </v-data-table>
</template>

<script setup lang="ts">

  interface Header {
    title: string
    key: string
  }

  const headers: Header[] = [
    { title: 'Red color', key: 'red' },
    { title: 'Green color', key: 'green' },
    { title: 'Blue color', key: 'blue' },
  ]

  const items = [
    {
      red: true,
      green: false,
      blue: true,
    },
  ];
</script>

看起来像这样：

我想避免手动定义每个列模板（红色、绿色、蓝色）。像这样的东西：

<template>
  <v-data-table :headers="headers" :items="items">
    <template v-for="<propName in item>" v-slot:item.<propName>="{ item }">
      <v-checkbox v-model="item.<propName>"></v-checkbox>
    </template>
  </v-data-table>
</template>

如何让它真正发挥作用？

Answer 1

你的意思是这样的：

<template>
  <v-data-table :headers="headers" :items="items">
    <template v-for="header in headers" v-slot:[`item.${header.key}`]="{ item }">
      <v-checkbox v-model="item[header.key]"></v-checkbox>
    </template>
  </v-data-table>
</template>

如果这就是您正在寻找的内容，如果需要，我可以更详细地解释它。