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

我有一个简单的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>

{{props.item[key]}

我试着使用，但是我所有的行都向右移动了1个位置&我只看到一个复选框，尽管我在标题上有多行，也有多行！

---

我应该如何继续？

这是与官方文件类似的工作代码笔

另一种方式

模板部分：

 <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>

---

您是否使用复选框发布代码？您应该将“显示选择”作为prop@Rikkas我对VueJs&Vuetify有点陌生。你能解释一下我是如何通过“show select”作为道具的吗？@HansFelixRamos我只是按照文档做的。刚刚在

v-data-table

tag中添加了'show select'，那么它应该可以工作了吗？嘿，Manoj，谢谢你的回答。正如你在问题部分看到的，我有一个不同的表格。我在使用道具。谢谢萨米尔，现在明白了。另外，如果您使用（{{props.item[key]}}）跟踪单击的项目，则可以使用，它将返回具有行数据的对象，该行数据可以根据所需的列值进行筛选。对于编辑行图标，可以添加单独的模板。通过这种方式，复选框不会中断，v-data-table功能也将更加完整。如何将其设置为该示例中选中的默认值？？

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