逐行Vuetify单选数据表

Question

我试图让 Vuetify 单选数据表可以通过行而不是复选框来选择。

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

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

我尝试了几种不同的方法来使用 2.1.3 版本中的插槽，但我似乎遗漏了一些东西，因为我无法让它工作。我目前正在使用按钮实现我想要实现的功能，但我似乎无法选择行。

<v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    :single-select="singleSelect"
    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 的语法，效果很好。

Answer 2

如果您想选择单个数据，您必须将所选项目键存储在另一个变量中，例如“selectedItem”，您应该像这样更改代码：

<tr v-for="item in items" :key="item.name" 
  :active="selectedItem == item.name" @click="selectedItem = item.name">

PS：

• 确保为您的项目使用唯一密钥
• selectedItem 是数据对象中的一个变量

Answer 3

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

 single-select="true"

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

    data () {
        return {
                true:true
               }
          }

如果你的数据名是真的我就没有问题 我认为正确的做法是

 single-select

这意味着你设置了 props single-select = true 的值 你可以查看文档here