vue.js - Vuetify 在 v-data-table 中显示图标

Question

我是 Vue 和 Vuetify 的新手，正在尝试解决显示带有一些数据的表格的问题。我希望在最后一列中有一个删除图标，以便在单击时执行一些操作。但是，当显示项目时，我无法显示图标。我可以获取要显示的数据(使用模板或默认:项目)，也可以获取要显示的图标并响应单击。我无法同时显示数据和图标。

这是我的 Codepen: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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98fef7f6ecd8aeb6e0" rel="noreferrer noopener nofollow">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53252636273a352a13617d2b" rel="noreferrer noopener nofollow">[email protected]</a>/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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196f6c7c592b3761" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bacccfdfced3dcc3fa8894c2" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vuetify.js"></script>