0

我是 Vue.js 和 Vuetify 的初学者：

  1. 我有一个 Vuetify 数据表，我正在尝试将不同的图标（来自 flaticon 的自定义图标）附加到列中，例如“fat (g)”。意味着每条新线都有自己的图标。

  2. 此外，我喜欢在 v-table-header 中有一个标题而不是复选标记。

如何在以下代码中执行此操作？

示例代码： https ://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/v-data-table/prop-row-selection.vue ：

<template>
<div id="app">
  <v-app id="inspire">
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      :single-select="singleSelect"
      item-key="name"
      show-select
      class="elevation-1"
    >
      <template v-slot:top>
        <v-switch
          v-model="singleSelect"
          label="Single select"
          class="pa-3"
        ></v-switch>
      </template>
    </v-data-table>
  </v-app>
</div>
</template> 

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      singleSelect: false,
      selected: [],
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    }
  },
})
</script>
4

1 回答 1

0

检查我制作的这个代码框：https ://codesandbox.io/s/stack-70958304-brw8z?file=/src/components/AppendIcons.vue

表格预览

好吧，这取决于您如何决定每行使用什么图标。通常的方法是在您的数据数组中使用所需的图标名称。

desserts: [
{
  name: 'Frozen Yogurt',
  calories: 159,
  fat: 6.0,
  carbs: 24,
  protein: 4.0,
  iron: '1%',
  icon: 'home'
},
...
]

item现在将图标附加到fat (g) 列可以使用v-data-table. 在我的示例中，我使用#item.fat="{item}"which 是一个简写形式v-slot:item.fat="{item}"来修改 fat 列的内容。有关插槽的更多信息，请查看文档页面。

如果您正在使用 es-lint，您可能会遇到一个警告，提及该valid-v-slot规则，这是一个已知的误报，您可以在此GitHub 问题线程中阅读更多信息，我个人只是关闭该 es-lint 规则。

<v-data-table
   v-model="selected"
   :headers="headers"
   :items="desserts"
   item-key="name"
   show-select
   class="elevation-1"
>
   <template v-slot:top>
      <div class="my-2 mx-4 text-h5 font-weight-medium">
         My custom title
      </div>
   </template>
   <template #item.fat="{item}">
      <div class="d-flex">
         <div>
            {{ item.fat }}
         </div>
         <div class="ml-2">
            <i :class="`fi fi-rr-${item.icon}`"></i>
         </div>
      </div>
   </template>
</v-data-table>

更新 1：通过 CDN 导入 flaticon。

<style>
/* <style> blocks that doesn't have the 'scoped' attribute
 make the CSS available in all your components, I usually put
 my global CSS in the App.vue file or in a external css file.
 
 In this case I'm just importing the regular rounded style
 of flaticons, if you want to use bold, solid, straight icons
 you'll need to import those as well */
@import url("https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css");

i {
  font-size: 1.2em;
}
</style>

Vuetify 组件默认在其中使用材质图标，以防您想更进一步并修改这些图标以使用平面图标。您可以在全局级别配置它，而不是创建包装组件或在每次出现组件时手动定义特定图标，有关更多信息，请参阅图标字体文档。

假设您要修改 vuetify 组件中使用的排序箭头图标以使用箭头小向上平面图标。然后你会做这样的事情：

// src/plugins/vuetify.js

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    values: {
      sort: "fi fi-rr-arrow-small-up"
    },
  },
})

更新 2：如何在 vuetify 中使用自定义 SVG 文件。

本地 SVG 文件可以通过简单的普通<img>标签显示在您的应用程序中。Vuetify 的<v-img>组件只能显示来自 URL 的外部 SVG 文件。就像这里的这个：https ://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg

那是因为使用的内部文件加载<v-img>器不支持本地 SVG 文件。所以最简单的解决方案就是使用普通<img>标签。

<div>
   {{ item.fat }}
</div>
<div class="ml-2">
   <img v-if="item.name == 'Donut'" src="../assets/donut.svg" width="20" alt=""/>
   <i v-else :class="`fi fi-rr-${item.icon}`"></i>
</div>

SVG 示例

于 2022-02-02T17:48:01.063 回答