插槽中的 Vuetable2 插槽答案

【问题标题】：Vuetable2 slot in slot插槽中的 Vuetable2 插槽
【发布时间】：2020-04-29 16:39:30
【问题描述】：

我使用 vue(2.6.10) 并尝试使用 vuetable2 (2.0.0-beta.4) 构建通用表。

我为 vuetable 的通用方法创建了一个组件。

我尝试将“MyCustomTemplate”放在“MyVueTable”的插槽部分，但没有收到任何错误，也没有显示任何内容。

我的目标是在其他 vue 页面中使用“MyVueTable”并替换“MyCustomTemplate”。

我的数据中目前有 3 个条目，但在 List.vue 组件中没有显示任何内容

List.vue

<template>
    <MyVueTable :data="data" :fields="fields">
        <MyCustomTemplate v-slot="vueTableTemplateSlot"/>
    </MyVueTable>
</template

<script>
export default {
    name:"List",
    data(){
        return{
            data: [],
            fields: [
                {
                    name: 'vueTableTemplateSlot'
                }
            ]
        };
    }
}
</script>

MyVueTable.vue

<template>
    <vuetable ref="vuetable">
        <slot name="vueTableTemplateSlot" slot-scope="props"/>
    </vuetable>
</template>
<script>
    export default {
        name: 'MyVueTable',
        props: ['data', 'fields'],
        methods:{
            //vuetable methods
        }
    }
</script>

MyCustomTemplate.vue

<template>
    <div>
        {{rowData.id}}
    </div>
</template>
<script>
    export default {
        name: 'MyCustomTemplate',
        data(){
            return{
                rowData: null
            }
        }
</script>

【问题讨论】：

标签： vuejs2 vue-tables-2

【解决方案1】：

您可以测试将您的组件（在 List.vue 中）放在一个 div 或模板中，作为插槽内容：

<template #nameOfYourSlot>
      <NameOfYourComponent>
</template>

【讨论】：

【解决方案2】：

这是在官方存储库中回答的，您需要这样做才能成为您的自定义全局组件：https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-17

【讨论】：