Question

以下代码正确显示列标题和分页（2页，每页5条记录）。但是，数据全部显示在第一列，即混杂在一起。

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <meta charset="utf-8"/>
</head>
<body>
    <div id="app">
        <v-app>
        <kudos-list inline-template>
            <div>
                <tr>
                    <v-data-table :headers="headers" :items="desserts" v-slot:items="props">
                        <td>{{ props.item.name }}</td>
                        <td>{{ props.item.calories }}
                    </v-data-table>
                </tr>
            </div>
        </kudos-list>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
    <script>
        Vue.component('kudos-list', {
            data () {
                return {
                    headers: [
                        { text: 'Dessert (100g serving)', align: 'left', 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%'
                        }
                    ]
                }
            } 
        });

        var vm = new Vue({ 
            el: '#app',
        });
    </script>
</body>
</html>

当然，我期望数据与每个列标题对齐。我显然是Vue和Vuetify的新手，所以我意识到这可能是一个非常明显的错误，但是如果有人向我展示我的错误，我将非常有义务！：-）

Answer 1

您应该使用模板元素和v-slot伪指令来遍历数据：

           <v-data-table :headers="headers" :items="desserts" >
                    <template v-slot:items="props">
                        <td v-for="d in props.item">{{d}}</td>
                      </template> 
            </v-data-table>

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <meta charset="utf-8"/>
</head>
<body>
    <div id="app">
        <v-app>
        <kudos-list inline-template>
            <div>
                <tr>
                    <v-data-table :headers="headers" :items="desserts" >
                    <template v-slot:items="props">
                        <td v-for="d in props.item">{{d}}</td>
                      </template> 
                    </v-data-table>
                </tr>
            </div>
        </kudos-list>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
    <script>
        Vue.component('kudos-list', {
            data () {
                return {
                    headers: [
                        { text: 'Dessert (100g serving)', align: 'left', 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%'
                        }
                    ]
                }
            } 
        });

        var vm = new Vue({ 
            el: '#app',
        });
    </script>
</body>
</html>

Vuetify数据表项未与列对齐

1 个答案: