复选框和可点击图标列在 Vuetify 2 中停止工作答案

【问题标题】：checkbox and clickable icon columns stop working in Vuetify 2复选框和可点击图标列在 Vuetify 2 中停止工作
【发布时间】：2020-05-13 06:33:35
【问题描述】：

我正在将应用程序从 Vuetify 1.5 移植到版本 2。到目前为止，我只有一个问题，在文档或论坛中找不到答案问题在于表格的最后两列： - 一个是props.item.admin 的复选框，呈现为字符串“false”或“true” - 第二个是一个完全没有呈现的可点击图标（在浏览器中我看到完全空的表格单元格）

<v-data-table
  :headers="headers"
  :items="accounts"
  :search="search"
  :loading="loadingProgress"
  class="elevation-1"
  @click:row="openAccount">
  <v-progress-linear v-slot:progress color="blue" indeterminate></v-progress-linear>
  <template slot="items" slot-scope="props">
    <tr >
      <td class="text-xs-left"> {{ props.item.customerName }} </td>
      <td class="text-xs-center">{{ props.item.techCode }}</td>
      <td class="text-xs-center">{{ props.item.email }}</td>
      <td class="text-xs-center">{{ props.item.phone }}</td>
      <td class="text-xs-center">{{ props.item.ext }}</td>

      <td class="text-xs-center">
        <v-checkbox
          v-model="props.item.admin"
          readonly
        ></v-checkbox>
      </td>
      <td class="justify-center layout px-0">
        <v-icon
          @click.stop="confirmDeleteAccount($event, props.item)">
          delete
        </v-icon>
      </td>

    </tr>
  </template>
</v-data-table>

PS。忘了补充，外部表格图标呈现没有问题。

【问题讨论】：

标签： vuetify.js

【解决方案1】：

看起来像是在数据表中渲染表行，vuetify 团队建议使用template slots。不幸的是，文档既没有解释新方法，也没有解释绑定到值的单元格。

以下 v-data-table 设置适用于我

<v-data-table
  :headers="headers"
  :items="accounts"
  :search="search"
  :loading="loadingProgress"
  class="elevation-1"
  @click:row="openAccount">
  <v-progress-linear v-slot:progress color="blue" indeterminate></v-progress-linear>
  <template v-slot:item.admin="{ item }">
    <v-icon>
      {{ item.admin ? "mdi-checkbox-marked" : "mdi-checkbox-blank-outline" }}
    </v-icon>
  </template>
  <template v-slot:item.action="{ item }">
    <v-icon @click.stop="confirmDeleteAccount(item)">delete</v-icon>
  </template>
</v-data-table>

【讨论】：