Vuetify 单选数据表格（按行）

Question

我正尝试使Vuetify单选数据表格可通过行选择，而不是通过复选框选择。目前在Vuetify文档中的示例（Ex.1）如下：https://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>

- Ph33ly

Answer 1

如果您想进行单个数据选择，您需要将所选项目键存储在另一个变量中，例如“selectedItem”，您应该按照以下方式更改代码：

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

提示：

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

- RoduanKD

Answer 2

我尝试了语法:single-select=true，它运行良好。

- mkcor

Answer 3

我认为你的问题在于你的props

 single-select="true"

在您的模板中，您使用了single-select="true"，而vuetify正在寻找名为true的数据。

    data () {
        return {
                true:true
               }
          }

如果你有一个名为true的数据，那就没有问题了。我认为正确的做法是这样的。

 single-select

这意味着您将props single-select的值设置为true，您可以在这里检查文档。

- idirsun

---

示例1正在工作，因为单选项不是v-bind，它没有导致设置值时出现问题，但我已将其更改为具有默认值“true”的已建立数据属性。主要问题针对示例2。<v-btn>示例有效，但<tr>示例无效。 - Ph33ly

抱歉，我的错，我以为它是绑定。 - idirsun

此 props single-select 仅适用于 vuetify 2.X.X 及以上版本。 - Irwuin