程序员经验分享-hwhale

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

2023-12-27

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

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


如果我正确理解你的问题，你想要动态图标（或附加到）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/[email protected] /cdn-cgi/l/email-protection/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

vuejs

vuetifyjs

将图标附加到 vuetify 数据表中的表列？ 的相关文章

  • JavaScript 中的 ParseFloat 函数

    当我添加两个文本框值时1 001 and 0 001然后我做了一个parseFloat I get 1 0019999999 我要它1 002 你能帮助我吗 JavaScriptNumber http www w3schools com j

  • 在选择下拉列表中选择特定选项时添加输入框

    我需要在选择选项时将输入添加到选择选项中 每当用户选择 其他 时 就会出现一个输入框供用户输入数据 HTML

  • 匹配CSS的正则表达式“<属性>：<值>”

    我从以下位置检索了 CSS 规则document styleSheets现在我正在寻找提取它的属性和值 cssText expl position absolute background color rgb 204 204 204 max

  • 添加数组的总和。显示1个输出

    更新 这个问题的答案如下 感谢在不同线程上进行的 dougtesting 将数组相加 显示总和 https stackoverflow com questions 45724641 add array together display su

  • HTML5 Audio Element 无法在 IOS 11 设备上的 safari 中播放 mp3 直播

    我是一家广播公司的网络开发人员 自 iOS 11 发布以来 我们收到了一些用户投诉 称我们的音频直播流无法再在 IOS 11 设备上播放 为了将流嵌入我们的网站 我们使用 HTML5 AudioElement 在 iOS 11 的 iPho

  • 如何绕过 IE8 对 data:uri Base64 编码的 32k 限制？

    我需要向浏览器发送包含 1920x1080 png 的 html 响应 这是一个 html 查询截取的屏幕截图 我对图像进行 base64 编码 并将其作为 text html 内容类型嵌入发送 一些简单的事情 比如 Whatever im

  • 如何在 vuejs 中防止/停止点击传播

    我有一个递归列表 树 每个元素都有一个 click sayHello el id 现在的问题是 因为它是一个嵌套列表 例如 list element 0 01 list el 1 01 list el 2 01 list el 1 02 l

  • 代理阻止网络套接字？如何绕行

    我有一个用 Python 编写的正在运行的 websocket 服务器 来自https github com opiate SimpleWebSocketServer https github com opiate SimpleWebSoc

  • 一个输入字段，多个名称

    在 HTML 表单中 如何从一个输入字段获取两个姓名 是否可以通过隐藏的输入字段 如何 我试图使隐藏字段值动态等于非隐藏字段值 这样无论用户写什么 它们都相等 但我确信它不起作用 而不是像这样的东西是否会起作用工作 Here http ww

  • 如何让更大的布局适合小设备屏幕？

    我有一个小问题meta viewport元素 问题是我的布局min width比我想要使用的许多屏幕分辨率都要大 所以将其设置为 没有帮助 结果我得到的页面必须缩小以适应设备宽度 如果我什至添加像 它也不起作用 发现了一个黑客来自CSS 技

  • 在 forEach() 中使用 `this` [重复]

    这个问题在这里已经有答案了 免责声明 我正在学习 JavaScript 我有一个像这样的对象构造函数 var Palette function this colors red green blue this getColorCombinat

  • AngularJS 与（Angular JS + jQuery）

    我有一个关于仅使用 AngularJS 和纯 JavaScript 以及使用 AngularJS 和 jQuery 时的性能问题 ex app directive fitHeight function window return restr

  • 如何隔离 Vuetify 全局样式

    我已经开始在旧的现有项目中将 Vue js 与 Vuetify 结合使用 所以我没有重写所有前端 我只是导入了Vue并替换了一些部分 然后我注意到一个非常意想不到的行为 Vuetify 具有常见类的全局样式 例如 title它不仅影响整个页

  • 使用Doctype让scrollTop返回0，为什么？

    当我将此 Doctype 放入我的文档中时document body scrollTop返回零 这是为什么 当您使用该 Doctype 时 您会将每个当前浏览器放入所谓的几乎标准模式 http hsivonen iki fi doctype

  • 如何使 Meteor 上的服务器可以访问文本文件

    我很惊讶我无法在这里搜索我的答案 似乎没有其他人遇到这个问题 当您运行meteor服务时 js html等被打包在 meteor local build文件夹中 但它似乎排除了不是js或html的内容 我有一个名为 magicsets 的文

  • 内部样式表中的 HTML 注释标签[重复]

    这个问题在这里已经有答案了 可能的重复 注释掉 HTML 文档中的样式表以支持旧版浏览器 https stackoverflow com questions 6825773 commenting out stylesheets in htm

  • Twitter Bootstrap 行过滤器/搜索框

    我无法找到有关如何为 Twitter Bootstrap 创建简单搜索查询或行过滤器的教程 我已经尝试了很多 我不确定是否我做错了什么或者插件与 Bootstrap 不兼容 如果可以的话请帮忙 我试过了 document ready fun

  • javascript初学者：在javascript中添加动态样式？ [复制]

    这个问题在这里已经有答案了 可能的重复 如何使用 Javascript 创建 标签 https stackoverflow com questions 524696 how to create a style tag with javasc

  • TypeScript 中 C# 类虚拟成员的等效项

    因此 在 C 中 当我创建模型类和延迟加载内容时 我会执行以下操作 public int User ID get set public int Dept ID get set 然后在我的班级稍远一点的地方 我像这样弹出我的虚拟 public

  • JavaScript：如何在 Internet Explorer 中模拟更改事件（委托）

    UPDATE 回顾 小提琴和赏金 这个问题并没有引起太多关注 所以我将花一些时间来解决这个问题 我知道我的答案和问题都过于冗长 这就是为什么我继续设置这把小提琴 http jsfiddle net vVA8N 在我看来 这是我目前必须用来接

随机推荐

热门标签