gpt4 book ai didi

javascript - 将图标附加到 vuetify 数据表中的表列?

转载 作者:行者123 更新时间:2023-12-02 03:10:10 24 4
gpt4 key购买 nike

我有一个 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>

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

最佳答案

如果我正确理解你的问题,你需要动态图标(或附加到)蛋白质字段,所以这是实现这一目标的一种方法:

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="087e7d6d7c616e7148392670" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="275152426715095f" 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="77010212031e110e3746590f" rel="noreferrer noopener nofollow">[email protected]</a>/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>

关于javascript - 将图标附加到 vuetify 数据表中的表列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57876246/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com