Question

我正在尝试使用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>

Answer 1

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

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

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

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

Answer 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

如何在Vuetify数据表中显示数据

2 个答案: