将图标附加到 vuetify 数据表中的表列？

Posted 2023-02-22

【中文标题】将图标附加到 vuetify 数据表中的表列？

【英文标题】：Appending an icon to a table column in vuetify data table?

【发布时间】：2020-01-12 12:47:42

【问题描述】：

我有一个 Vuetify 数据表，我试图在 <td> 上附加一个图标，其中包含蛋白质，但它的呈现方式，我无法理解我该怎么做？

所以我有一个组件被导入到 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>

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

【问题讨论】：

您使用的是哪个版本的 Vuetify？

我用的是1.5.18

【参考方案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>

【讨论】：

不是我想要的。我想知道是否有办法直接在 my-component 的 td 上使用 :append-icon 之类的东西？然后将其传递给其他组件？

如果它有标题并且 hideActions 是真的？

@Somethingwhatever v-bind 正是这样做的，只是它允许您一次绑定多个道具（protein、carbs 等）。

@Somethingwhatever 不确定你的第二个问题是什么意思。

【参考方案2】：

希望这对某人有所帮助。

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