Question

我有一个vuetify数据表，我试图将图标添加到其中仅含蛋白质的位置，但是它的呈现方式使我无法理解该怎么做？

所以我有要导入到vuetify数据表模板中的组件，并且该组件分别由图标div组成。

<template>
 <v-data-table>
   <template v-slot:items="props">
      <my-component 
        :protein="props.item.protein"
        :carbs="props.item.carbs" 
        :fats = "props.item.fats"
        :iron="props.item.iron"/>
   </template>
 <v-data-table>
</template>

在我的组件中，我具有如下模板设置：-

 <template>
    <tr>
      <td>
        <v-checkbox> </v-checkbox>
      <td>
           <div>        
            <router-link>
         <i class="fa fa-globe"></i>
        </router-link>
    </div>
    </tr>
 </template>

不确定我如何将图标附加到蛋白质字段吗？

Answer 1

如果我正确理解了您的问题，则希望为protein字段添加动态图标（或将其附加到Vue.component('MyComponent', { template: ` <tr> <td><i :class="['fa', 'fa-'.concat(protein)]"></i></td> <td>{{carbs}}</td> <td>{{fats}}</td> <td>{{iron}}</td> </tr> `, props: ['protein', 'carbs', 'fats', 'iron'] }); new Vue({ el: '#demo', data: () => ({ opts: { headers: [ { text: 'Protein', value: 'protein' }, { text: 'Carbs', value: 'carbs' }, { text: 'Fats', value: 'fats' }, { text: 'Iron', value: 'iron' } ], items: [ { protein: 'cutlery', carbs: 4, fats: 1, iron: 5 }, { protein: 'shopping-basket', carbs: 5, fats: 5, iron: 0 }, { protein: 'beer', carbs: 2, fats: 9, iron: 3 } ], hideActions: true } }) })字段中），因此，这是一种实现方法：

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.min.css" rel="stylesheet">

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

<div id="demo">
  <v-data-table v-bind="opts">
    <template #items="{ item }">
      <my-component v-bind="item"></my-component>
   </template>
  </v-data-table>
</div>

const numbers = [1, 2, 3, 4, 5]

Answer 2

希望这对某人有帮助。

<template>
  <v-data-table>
    <template v-slot:item.protein="{ item }">
      <i class="fa fa-globe"></i>{{ item.protein }}
    </template>
  </v-data-table>
</template>

在vuetify数据表的表列中添加图标？

2 个答案: