将图标附加到 vuetify 数据表中的表列? [英] Appending an icon to a table column in vuetify data table?
问题描述
我有一个 Vuetify 数据表，我试图将一个图标附加到 <td> 中，其中包含蛋白质，但它的呈现方式，我无法理解我会去做吗?
所以我有一个组件被导入到 Vuetify 数据表模板中，该组件分别由图标 div 组成.
<v-数据表><模板 v-slot:items="props"><我的组件:protein="props.item.protein":carbs="props.item.carbs":fats = "props.item.fats":iron="props.item.iron"/></模板><v-数据表></模板>在我的组件中，我有这样的模板设置:-
<模板><tr><td><v-复选框></v-复选框><td><div><路由器链接><i class="fa fa-globe"></i></路由器链接></tr></模板>
不确定如何将图标附加到蛋白质字段?
如果我正确理解您的问题，您需要动态图标(或附加到)protein 字段，所以这里有一种方法实现这一目标:
Vue.component('MyComponent', {模板:`<tr><td><i :class="['fa', 'fa-'.concat(protein)]"></i></td><td>{{碳水化合物}}</td><td>{{fats}}</td><td>{{铁}}</td></tr>`，道具:['蛋白质'，'碳水化合物'，'脂肪'，'铁']});新的 Vue({el: '#demo',数据:() =>({选择:{标题: [{文本:'蛋白质'，值:'蛋白质'}，{文本:'碳水化合物'，值:'碳水化合物'}，{文本:'脂肪'，值:'脂肪'}，{ 文字:'铁'，值:'铁' }],项目: [{蛋白质:'餐具'，碳水化合物:4，脂肪:1，铁:5}，{蛋白质:'购物篮'，碳水化合物:5，脂肪:5，铁:0}，{蛋白质:'啤酒'，碳水化合物:2，脂肪:9，铁:3}],隐藏动作:真}})})<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="样式表"/><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="演示"><v-data-table v-bind="opts"><template #items="{ item }"><my-component v-bind="item"></my-component></模板></v-data-table>I have a Vuetify data table and I am trying to append an icon to just the <td> with protein in it but the way it is being rendered, I am not able to understand how would I go about it?
So I have component which is being imported into the Vuetify data table template and that component separately consists of the icon 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>
And in my component i have the template setup like this:-
<template>
<tr>
<td>
<v-checkbox> </v-checkbox>
<td>
<div>
<router-link>
<i class="fa fa-globe"></i>
</router-link>
</div>
</tr>
</template>
Not sure how I can append the icon to the protein field?
If I understood your question correctly, you want dynamic icons for (or appended onto) the protein fields, so here's one way to achieve that:
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>
这篇关于将图标附加到 vuetify 数据表中的表列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
