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

Question

我有一个简单的V-data-table。我正在尝试为表中的每一行添加复选框。

我的桌子看起来像这样。

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

我尝试使用官方指南来执行此操作，但是我的所有行都向右移动了 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%',
},
],
}
},
})