Question

因此，我从vuetify 1.5升级到了最新版本（2.1xx），并卡在了一些地方。我有一个数据表，希望在标题中有一个“全选”复选框。我添加了它的“ show-select”属性，我看到的是，当选中该复选框时，它实际上将所有项目都放入了“ selected” v模型中。

我的问题是我想拥有一个用于item-props的模板以自定义行的外观，并且绑定到“ props.selected”的复选框似乎不起作用。如果我在任何行上选中任何复选框，则该项目不被添加到我的“选定” v模型中。

如果我完全不使用模板，则只能使用来处理自动生成的复选框，但这不足以满足我当前的需求。在vuetify 1.5中，我可以使用它，但是我不知道如何在新版本中使用它。

<template>
<div>
    <v-data-table 
        hide-default-footer 
        v-model="selected" 
        :sort-desc.sync="sortDescending"
        :sort-by.sync="sortBy"
        :headers="headers" 
        :items="cases" 
        item-key="id" 
        show-select 
        :items-per-page="itemsPerPage"
        class="elevation-0">

        <template v-slot:item="props">
            <tr>
              <td>
                   <v-checkbox v-model="props.selected" color="nordnetBlue" hide-details ></v-checkbox>
                </td>       
                <td class="navigation-link" @click="goToCase(props.item)">{{ concatText( props.item.subject, 20) }}</td>
                <td>{{ props.item.createdOn }}</td>
                <td>{{ props.item.source }}</td>
                <td>{{ !props.item.isSameQueue ? props.item.queueName : '' }}</td>
            </tr>
        </template>
    </v-data-table>
    <pre class="green--text">{{selected}}</pre>
</div>
</template>

Answer 1

我无法解决此问题，因此我遵循了一个有关如何为每个特定列自定义广告位的vuetify文档示例。

因此，就我而言，如您所见。我只在其中三列中按原样显示文本，其中两列我做了一些修改。因此，我为要编辑的两个模板使用了模板。

示例：

template v-slot:item.Name="{ item }">
   {{ item.Name }}                                
   <v-tooltip bottom>
    <template v-slot:activator="{on}">
      <v-icon @click="openCustomer(item.Id)" class="clickable" small color="nordnetBlue" v-on="on">launch</v-icon>
    </template>
    Open in new window
    </v-tooltip>                                  
</template>

在数据表中查看显示选择而不选择项目

1 个答案: