vuetify.js - 在数据表中查看显示选择而不选择项目(vuetify show-select in data-table not selecting items)

Question

So, I upgraded from vuetify 1.5 to latest (2.1xx) and get stuck on a few places.

(因此，我从vuetify 1.5升级到了最新版本（2.1xx），并陷入了一些困境。)

I have a data-table where I want a "select all" checkbox in the header.

(我有一个数据表，希望在标题中有一个“全选”复选框。)

I added it with the "show-select" property and what I can see is that as the checkbox, when checked, actually puts all the items in the "selected" v-model.

(我添加了“ show-select”属性，我看到的是，当选中该复选框时，它实际上将所有项目置于“ selected” v模型中。)

My problem is that I want to have a template for item-props to customize the appearance of the rows and the checkbox that I bind to "props.selected" does not seem to work.

(我的问题是我想要一个用于item-props的模板来自定义行的外观，并且绑定到“ props.selected”的复选框似乎不起作用。)

If I check any checkbox on any row the item is not added to my "selected" v-model.

(如果我在任何行上选中任何复选框，则该项目不会添加到我的“选定” v模型中。)

It is only if I use no template at all that I get it to work with the auto-generated checkboxes but this does not suffice for my current demands.

(只有在完全不使用模板的情况下，它才能与自动生成的复选框一起使用，但这不足以满足我当前的需求。)

In vuetify 1.5 I got it to work but I don't understand how to make it work in the new version.

(在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>

  ask by Toby Fieldgroove translate from so

Answer 1

I could not solve this so I followed a vuetify documentation example of how to customize the slot for each particular column.

(我无法解决此问题，因此我跟随了一个vuetify文档示例，该示例说明如何为每个特定列自定义插槽。)

So in my case, as you can see.

(如您所见，就我而言。)

three of the columns I just display the text as is and for two of them I do some modifying.

(我只在其中三列中按原样显示文本，其中两列我做了一些修改。)

So, I used a template for the two ones I wanted to edit.

(因此，我为要编辑的两个模板使用了模板。)

Example:

(例：)

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>