vuetify 数据表将项目从父项传递给子项以为字段着色答案

【问题标题】：vuetify data table passing an item from parent to child to colour a fieldvuetify 数据表将项目从父项传递给子项以为字段着色
【发布时间】：2022-08-19 23:27:43
【问题描述】：

学习 Vuetify 和 Vuetify（两者都喜欢），但遇到一个我无法弄清楚的问题，所以希望有人分享最佳实践

我创建了一个包含 vuetify 数据表的组件，并通过道具将标题和项目从父级传递给子级，到目前为止一切都很好

我想不通的一点是我想遍历一个特定的字段（我使用的示例是 item.calories 根据文档）并在其上运行一个函数。

我假设我将 item.calories 字段作为道具传递，但是我如何将其发送到函数

在我的父母中，我按如下方式传递给我的 DataTable 组件

<DataTable 
:headers=\"headers\" 
:content=\"content\" 
title=\"This is my data table title\" 
:myCalories=\"content.calories\" <-- This bit is causing me the issue

如何在我的 DataTable 组件中更改以下内容以使用 :myCalories 道具，或者是否有更好的方法可以考虑？

<template v-slot:[`item.calories`]=\"{ item }\">
  <v-chip
    :color=\"getColor(item.calories)\"
    dark
  >
    {{ item.calories }}
  </v-chip>
</template>

我的功能

methods: {
  getColor (calories) {
    if (calories > 400) return \'red\'
    else if (calories > 200) return \'orange\'
    else return \'green\'
  },
},

我确实想知道我是否应该首先在父级中运行该函数并将结果传递给但是如果您能就实现上述目标的最佳实践方法提出建议，将不胜感激

长臂猿

标签： vue.js datatable vuetify.js

【解决方案1】：

我不确定这会有所帮助，但我遇到了类似的问题，最终使用了 v-data-table 的主体插槽并重新定义了我的整个表。

这种解决方法可以帮助您，但这肯定不是最好的方法

        <template v-slot:body="{ items, headers }">
            <tbody>
                <tr v-for="item in items" :key="item.name">
                    <td v-for="column in headers" :key="column.value">
                        <div v-if="column.value === 'calories'" :style="getColor(item.calories)">
                              {{ item[column.value] }}
                        </div>
                        <div v-else>
                            {{ item[column.value] }}
                        </div>
                    </td>
                </tr>
            </tbody>
        </template>

这是代码笔示例https://codepen.io/taghurei-the-reactor/pen/YzaBNxw?editors=1111

【讨论】：