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

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

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

PS：

确保为您的商品使用唯一键
selectedItem是数据对象中的变量

Answer 2

我认为您的问题是道具

 single-select="true"

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

    data () {
        return {
                true:true
               }
          }

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

 single-select

这意味着您设置props单选= true的值您可以查看文档here

Answer 3

我尝试了语法:single-select=true，但效果很好。

按行查看单一选择数据表

3 个答案: