如何在 vuetify 数据表中显示数据答案

【问题标题】：How to display data in vuetify datatable如何在 vuetify 数据表中显示数据
【发布时间】：2020-04-06 19:34:41
【问题描述】：

我正在尝试使用 Vuetify 数据表来显式创建表，以便我可以更好地控制它，但我似乎没有得到它。我有以下代码，但由于某种原因，£ 符号没有显示表格

<template>
    <v-data-table
        :headers="headers"
        :items="boughtArtPacks"
        sort-by="expiration_time"
    >
    <template slot="items" slot-scope="props">
        <td>{{props.item.artpack.name}}</td>
        <td>{{props.item.email}}</td>
        <td>{{props.item.valid}}</td>
        <td>{{props.item.expiration_time}}</td>
        <td>{{props.item.download_count}}</td>
        <td>£{{props.item.artpack.price}}</td>
        <td>{{props.item.action}}</td>
    </template>
    </v-data-table>
</template>

和javascript

<script>
    export default {
        data: () => ({
            dialog: false,
            headers: [
                {
                    text: 'Art Pack Name',
                    align: 'left',
                    sortable: true,
                    value: 'artpack.name',
                    width: '20%'
                },
                { text: 'Customer Email', value: 'email', sortable: true, width: '20%' },
                { text: 'Valid?', value: 'valid', sortable: true, width: '10%' },
                { text: 'Expiry Date', value: 'expiration_time', sortable: true, width: '10%' },
                { text: 'Download Count', value: 'download_count', sortable: true, width: '10%' },
                { text: 'Pack Price', value: 'artpack.price', sortable: true, width: '10%' },
                { text: 'Actions', value: 'action', sortable: false, width: '10%' },
            ],
            boughtArtPacks: [],
            select:['Yes', 'No'],
            editedIndex: -1,
            editedItem: {
                valid: '',
                action: '',
            },
            defaultItem: {
                valid: '',
                action: '',
            },
        }),
</script>

【问题讨论】：

那么，您的意思是，所有数据都完美显示，除了没有£ 符号？
是的，没错。小问题，但只是想知道是否可以完成
老实说，我无法复制这个问题：p
您使用的是哪个版本的 Vuetify？

标签： javascript vue.js datatable vuetify.js

【解决方案1】：

如果您使用的是新的 Vuetify 版本，您需要为每个标头定义一个插槽。

<template v-slot:item.price="{item}"> £{{item.artpack.price}} </template>

headers:[{text: 'Pack Price', value: 'price'}]

对于需要显示修改数据的其余字段，您使用相同的概念。

【讨论】：

【解决方案2】：

您正在寻找item 插槽...

<template v-slot:item="{ item }">
    <tr>
        <td>{{item.artpack.name}}</td>
        <td>{{item.email}}</td>
        <td>{{item.valid}}</td>
        <td>{{item.expiration_time}}</td>
        <td>{{item.download_count}}</td>
        <td>£{{item.artpack.price}}</td>
        <td>{{item.action}}</td>
    </tr>
</template>

Demo

【讨论】：