时间戳

首页 > 解决方案 > 逐行Vuetify单选数据表

javascript - 逐行Vuetify单选数据表

问题描述

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

我在 Vuetify 的文档中看到的当前示例是：Ex。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>

标签： javascriptvue.jsvuetify.js

解决方案

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

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

PS：

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

推荐阅读