Vuetify 树数据表

Question

如何在 v-data-table 中嵌入 v-tree-view 组件？

我试了很多次都没有结果。

以没有 vuetify v-tree-table 为例，问题来了，如何将 v-tree-view 与 v-data-table 集成？

Answer 1

您可以定义一个槽来自定义任何列。所以你可以在那里插入你的树视图。一个例子：

<template>
    <v-data-table
    :headers="headers"
    :items="cosas"
    >
    <template v-slot:[`item.description`]>
        <td>
            <template>
                <v-treeview :items="treeItems"></v-treeview>
            </template>
        </td>
    </template>

    </v-data-table>
</template>

<script>
export default {
  name: 'MyComponent',

   data () {
        return {
            headers:[
                { text: 'Name', value: 'name'},
                { text: 'Description', value: 'description'},
            ],
            cosas:[
                { name: 'Item1', description: 'description1'},
                { name: 'Item2', description: 'description2'},
            ],
            treeItems: [
                {
                id: 1,
                name: 'Applications :',
                children: [
                    { id: 2, name: 'Calendar : app' },
                    { id: 3, name: 'Chrome : app' },
                    { id: 4, name: 'Webstorm : app' },
                ],
                },
                {
                id: 5,
                name: 'Documents :',
                children: [
                    {
                    id: 6,
                    name: 'vuetify :',
                    children: [
                        {
                        id: 7,
                        name: 'src :',
                        children: [
                            { id: 8, name: 'index : ts' },
                            { id: 9, name: 'bootstrap : ts' },
                        ],
                        },
                    ],
                    },
                    {
                    id: 10,
                    name: 'material2 :',
                    children: [
                        {
                        id: 11,
                        name: 'src :',
                        children: [
                            { id: 12, name: 'v-btn : ts' },
                            { id: 13, name: 'v-card : ts' },
                            { id: 14, name: 'v-window : ts' },
                        ],
                        },
                    ],
                    },
                ],
                },
                {
                id: 15,
                name: 'Downloads :',
                children: [
                    { id: 16, name: 'October : pdf' },
                    { id: 17, name: 'November : pdf' },
                    { id: 18, name: 'Tutorial : html' },
                ],
                },
                {
                id: 19,
                name: 'Videos :',
                children: [
                    {
                    id: 20,
                    name: 'Tutorials :',
                    children: [
                        { id: 21, name: 'Basic layouts : mp4' },
                        { id: 22, name: 'Advanced techniques : mp4' },
                        { id: 23, name: 'All about app : dir' },
                    ],
                    },
                    { id: 24, name: 'Intro : mov' },
                    { id: 25, name: 'Conference introduction : avi' },
                ],
                },
            ],
        }
    }
}
</script>

在模板中设置您的过滤器，使其仅插入您需要的单元格中。