3

因此，我从 vuetify 1.5 升级到最新（2.1xx）并卡在了几个地方。我有一个数据表，我想在标题中添加一个“全选”复选框。我用“show-select”属性添加了它，我可以看到，当复选框被选中时，实际上将所有项目放在“选定”v-model中。

我的问题是我想要一个用于 item-props 的模板来自定义行的外观，而我绑定到“props.selected”的复选框似乎不起作用。如果我选中任何行上的任何复选框，则该项目不会添加到我的“选定”v-model 中。

只有当我完全不使用模板时，我才能让它与自动生成的复选框一起使用，但这不足以满足我目前的需求。在 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>
4

1 回答 1

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>
于 2019-12-01T11:30:57.857 回答