如何将复选框与 v-data-table 集成 - Vuetify

Question

我有一个简单的 V 数据表。我正在尝试为表格中的每一行添加复选框。

我的桌子是这样的。

<v-data-table :headers="headers" :items="rows"item-key="name" :search="search">
    <template v-slot:item="props">
        <tr >
            <td v-for="(prop, key) in props.item" :key="key" @click="onClickItem(key, props.item[key])">
                {{props.item[key]}}     
            </td>
            <td>
                <!-- Some icons for editing rows -->        
            </td>
        </tr>
    </template> 
    <template v-slot:top>
         <!-- A dialog box for editing rows -->
    </template>
</v-data-table>

我尝试使用official guide 来执行此操作，但是我的所有行都向右移动了 1 个位置，即使我在标题上也有多行，我也只看到一个复选框！ 我应该如何进行？

Answer 1

这是类似于官方文档的工作代码笔 https://codepen.io/manojkmishra/pen/MWadELG

另一种方式 https://codepen.io/manojkmishra/pen/bGVyoaw

模板部分：

 <div id="app">
  <v-app id="inspire">
  <h5>Selected: {{selected}}</h5>
  <v-data-table
  v-model="selected"
  :headers="headers"
  :items="desserts"
  item-key="name"
  show-select
  class="elevation-1"
  >
  </v-data-table>
 </v-app>
</div>

脚本部分：

new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
  singleSelect: false,
  selected: [],
  headers: [
    {
      text: 'Dessert (100g serving)',
      align: 'start',
      sortable: false,
      value: 'name',
    },
    { text: 'Calories', value: 'calories' },
    { text: 'Fat (g)', value: 'fat' },
    { text: 'Carbs (g)', value: 'carbs' },
    { text: 'Protein (g)', value: 'protein' },
    { text: 'Iron (%)', value: 'iron' },
  ],
  desserts: [
    {
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: '1%',
    },
    {
      name: 'Ice cream sandwich',
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      iron: '1%',
    },
    {
      name: 'Eclair',
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0,
      iron: '7%',
    },
  ],
 }
},
})