vuejs2 - 插槽中的 Vuetable2 插槽

Question

我使用 vue(2.6.10) 我试图用 vuetable2 (2.0.0-beta.4) 构建一个通用表。

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

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

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

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

---

列表.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>

Answer 1

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

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

Answer 2

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