如何在vuetify DataTable中添加标题图标

dtcbnfnu  于 2023-08-07  发布在  Vue.js
关注(0)|答案(2)|浏览(157)

我正在尝试将(+)图标添加到v-datable中的一个标题列。下面的代码不添加任何图标。实际上,为表头创建模板槽对数据表没有任何影响。
我所尝试的,

  1. <template>
  2. <v-data-table
  3. item-key="name"
  4. :items="complainantInfos"
  5. :headers="headers"
  6. sort-by="Id"
  7. class="elevation-1">
  8. <template v-slot:top>
  9. <v-toolbar flat color="white">
  10. <v-toolbar-title>Inspection</v-toolbar-title>
  11. <v-spacer></v-spacer>
  12. </v-toolbar>
  13. </template>
  14. <template slot="headers" slot-scope="props">
  15. <tr>
  16. <th
  17. v-for="header in props.headers"
  18. :key="header.text">
  19. <v-icon small >plus-circle-outline</v-icon>
  20. {{ header.text }}
  21. </th>
  22. </tr>
  23. </template>
  24. </v-data-table>
  25. </template>
  26. <script>
  27. import { mapGetters } from "vuex";
  28. export default {
  29. data(){
  30. return{
  31. complainantInfos:[
  32. {
  33. ...
  34. }
  35. ],
  36. headers: [
  37. { text: 'NameSurname', value: 'name', align: 'left' ,width: "25%" },
  38. { text: 'ID', value: 'PersonelIdNumber' },
  39. { text: 'Phone-1', value: 'Cellular1' },
  40. { text: 'Phone-2', value: 'Cellular2' },
  41. { text: 'Work Phone', value: 'WorkPhone' },
  42. { text: 'InterPhone', value: 'Interphone' },
  43. { text: 'Email', value: 'Email' },
  44. //{ text: '+', value: 'action', sortable: false, align: 'right'}
  45. ],

字符串
我已经根据注解编辑了代码。问题解决了。

  1. ...
  2. </v-card>
  3. </v-form>
  4. </v-dialog>
  5. </v-toolbar>
  6. </template>
  7. <template v-slot:header.Actions="{ header }">
  8. <v-icon small>plus-circle-outline</v-icon>{{ header.text }}
  9. </template>
  10. ...

zhte4eai

zhte4eai1#

由于您只希望将图标添加到一个特定的列,我建议使用header.columnName。
您的插槽看起来像这样:

  1. <template v-slot:header.name="{ header }">
  2. <v-icon small>plus-circle-outline</v-icon>{{ header.text }}
  3. </template>

字符串
如果列名为“Cellular1”,则代码将为<template v-slot:header.Cellular1="{ header }">
请确保您有图标集包括在内。否则,不会为v-icon呈现HTML。你可以用默认的mdi图标来测试它,例如mdi-minus

krcsximq

krcsximq2#

上面的代码没有被应用,所以我做了下面的事情。

  1. <template v-slot:column.name="{ column }">
  2. {{ column.title }}<v-btn variant="text" icon="mdi-delete"></v-btn>
  3. </template>

字符串
你可以把你的头键放在名字里。

相关问题