逐行验证单个选择数据表

Question

我正在尝试使Vuetify单一选择数据表可通过行而不是复选框来选择。

我在Vuetify的文档中看到的当前示例是： 1 https://vuetifyjs.com/en/components/data-tables#api。这通常是我想要的，但是我想删除复选框，然后按行选择。

我看到以前的版本能够完成一些与插槽有关的事情：例如。 2 https://v15.vuetifyjs.com/en/components/data-tables。

我已经尝试了几种不同的方法来使用2.1.3版本中的插槽，但由于无法正常工作，我似乎缺少了一些东西。我目前想使用按钮来实现，但是在选择行时似乎遇到了麻烦。

<v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    single-select="true"
    item-key="name"
    show-select
    class="elevation-1"
    >
        <template v-slot:item.data-table-select="{ isSelected, select }">
            <v-btn color="green" :value="isSelected = !isSelected" @click="select($event)"></v-btn>
        </template> 
</v-data-table>

编辑：我试图实现一个带有插槽的可选数据表，但它似乎不是item.selected的作品？这仍然是选择行项目的正确方法吗？

<v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    :single-select="singleSelect"
    item-key="name"
    show-select
    class="elevation-1"
    >
        <template v-slot:body="{ items }">
            <tbody>           
                <tr v-for="item in items" :key="item.name" :active="item.selected" @click="item.selected = !item.selected">
                    <td>{{ item.name }}</td>
                    <td>CONTENT</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.calories }}</td>
                    <td>{{ item.fat }}</td>
                    <td>{{ item.carbs }}</td>
                    <td>CONTENT</td>
                </tr>
           </tbody> 
      </template>
</v-data-table>

Answer 1

我认为您的问题是您的道具

 single-select="true"

在您使用的模板中single-select="true"并且vuetify正在寻找名为true ex的数据。

    data () {
        return {
                true:true
               }
          }

如果您的数据名称为true，我不会有问题我认为正确的方法是

 single-select

这表示您为props single-select = true设置了值您可以查看文档here