Question

我使用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>

Answer 1

您可以测试将组件（在List.vue中）放置在div或将成为广告位内容的模板中：

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

Answer 2

此问题在官方存储库中得到了回答，您需要将其作为自定义全局组件：https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-17

插槽中的Vuetable2插槽

2 个答案: