Vuetify 在 v-data-table 中显示图标

Question

我是 Vue 和 Vuetify 的新手，我正在尝试解决我显示 table 和一些数据的问题。我希望在最后一列中有一个删除图标，以便在他们单击时采取一些操作。但是，我无法在显示项目时显示图标。我可以获得要显示的数据（使用模板或默认 :items）或者我可以获得要显示的图标并响应点击。我无法同时显示数据和图标。

这是我的代码笔：https://codepen.io/sonoerin/pen/ZEaRjOW

这是我的代码示例：

 ...
 <v-data-table
       :headers="fobHeaders"
       :items="selected.scannedDevices"
       :items-per-page="5"
       class="elevation-1">
       <template slot="items" slot-scope="props">
         <tr>
           <td>{{ props.item.deviceType }}</td>
           <td>{{ props.item.role }}</td>
           <td>{{ props.item.status }}</td>
          <td>{{props.item.activationDate}}</td>
              
         <td> <v-icon large @click="deleteFob(props.item)"> mdi-access-point-remove </v-icon></td>
         </tr> 
         </template>
   </v-data-table>

...

data() {
   return {   

     fobHeaders: [
         { text: "Type", value: "deviceType", sortable: true },
         { text: "Role", value: "role", sortable: true },
         { text: "Status", value: "deviceStatus", sortable: true },
         { text: "Active Date", value: "activationDate", sortable: true },
         { text: "Action", value: "action", sortable: false }
      ],

...

}

Answer 1

在您的示例中，模板槽声明不正确。 Vuetify 的 v-data-table 中没有 items 插槽。但是，有一个 body 插槽可用于访问 items。查看更多 in the docs.

因此，当您错误地声明您的模板插槽时，它会被完全忽略，这就是您的图标未显示的原因（实际上什么也没有显示）。

这是自定义渲染的正确方法：

<template v-slot:body="{ items }">
  <tr v-for="item in items" :key="item.scannedDeviceId">
    <td>{{ item.deviceType }}</td>
    <td>{{ item.role }}</td>
    <td>{{ item.deviceStatus }}</td>
    <td>{{ item.activationDate }}</td>
    <td><v-icon large @click="deleteFob(item)"> mdi-access-point-remove </v-icon></td>
  </tr> 
</template>

这是一个工作示例：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      selected: {
        scannedDevices: [{
          "scannedDeviceId": "123",
          "deviceType": "laptop",
          "role": "Office Manager",
          "activationDate": "2020-05-11",
          "deactivationDate": "2022-02-22",
          "deviceStatus": "DEACTIVATED"
        }]
      },
      fobHeaders: [{
          text: "Type",
          value: "deviceType",
          sortable: true
        },
        {
          text: "Role",
          value: "role",
          sortable: true
        },
        {
          text: "Status",
          value: "deviceStatus",
          sortable: true
        },
        {
          text: "Active Date",
          value: "activationDate",
          sortable: true
        },
        {
          text: "Action",
          value: "action",
          sortable: false
        }
      ],

    }
  },
  methods: {
    deleteFob(item) {
      console.log("Delete item ID # " + item.scannedDeviceId);
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-data-table :headers="fobHeaders" :items="selected.scannedDevices" :items-per-page="5" class="elevation-1">
      <template v-slot:body="{ items }">
                <tr v-for="item in items" :key="item.scannedDeviceId">
                  <td>{{ item.deviceType }}</td>
                  <td>{{ item.role }}</td>
                  <td>{{ item.deviceStatus }}</td>
                  <td>{{item.activationDate}}</td>
                  
                  <td><v-icon large @click="deleteFob(item)"> mdi-access-point-remove </v-icon>
                  </td>
                </tr> 
               </template>

    </v-data-table>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Vuetify 在 v-data-table 中显示图标

Vuetify to show icon in v-data-table

vue.js

vuetify.js