PrimeVue DataTable未显示

Question

我正在尝试使用PrimeVue并使用DataTable组件--但它没有显示？似乎是某种类型的$slots错误？按钮组件正在按预期呈现和工作。Table.vue

​

<template>
    <div>
        <DataTable :value="products">
            <Column field="brand" header="Brand"></Column>
            <Column field="year" header="Year"></Column>
            <Column field="color" header="Color"></Column>
            <Column field="vin" header="Vin"></Column>
        </DataTable>
        <ColorPicker v-model="color" />
    </div>
</template>

<script>

    import DataTable from "primevue/datatable";
    import Column from "primevue/column";
    import ColorPicker from 'primevue/colorpicker';

    export default {

        name: "Table",
        props: {
        },
        data() {
            return {
                products: [
                    {"brand": "Volkswagen", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
                    {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
                    {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
                    {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
                    {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
                    {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
                    {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
                    {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
                    {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
                    {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
                ],
                color: '1976D2'

            }
        },
        components: {
            DataTable,
            Column,
            ColorPicker
        },
    }
</script>


<style scoped>

</style>

​

main.js

​

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
// Importing the Nova Light PrimeVue theme styles
import 'primevue/resources/themes/rhea/theme.css';

// Importing the base PrimeVue component styles
import 'primevue/resources/primevue.min.css';

// Importing the base PrimeIcon styles
import 'primeicons/primeicons.css';

Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

​

dataTable显示在Vue DevTools：工具中的DataTable中

我在控制台"TypeError: this.$slots.default不是一个函数“中得到了这个错误：

​

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: this.$slots.default is not a function"

found in

---> <DataTable> at node_modules/primevue/components/datatable/DataTable.vue
       <Table> at src/components/Table.vue
         <App> at src/App.vue
           <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839



TypeError: this.$slots.default is not a function
    at VueComponent.headerColumnGroup (DataTable.vue?dffe:1705)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
    at VueComponent.computedGetter [as headerColumnGroup] (vue.runtime.esm.js?2b0e:4

​

如何纠正此错误？

Answer 1

编辑:我在意识到SO算法向我展示了一个将近2年前的问题之前，我添加了我的答案。我相信你现在已经弄明白了.

看了一眼，我注意到你没有这个：

import PrimeVue from 'primevue/config';

app.use(PrimeVue, { ripple: true });

在你的main.js里

你用的是Vue 2还是Vue 3？

我只在vue 3中使用过它，所以我的main.js是这样的：

import { createApp, reactive } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import router from './router';

// primevue
import PrimeVue from 'primevue/config';
import './assets/layout/layout.scss';

import 'primeflex/primeflex.min.css';
import 'primeicons/primeicons.css';
import 'primevue/resources/primevue.min.css';
import 'primevue/resources/themes/saga-blue/theme.css';
import 'primevue/resources/themes/fluent-light/theme.css';

// primevue components that get used multiple times throughout app
import Button from 'primevue/button';
// ... any others

// app has to be created after imports aparently
const app = createApp(App);

app.component('Button', Button); 
// ... any others

app.use(createPinia());
app.use(router);
app.use(PrimeVue, { ripple: true });


// globalProperties was designed for options API so instead of:
// app.config.globalProperties.$appState = reactive({ inputStyle: 'outlined' });
// I'm using provide/inject pattern instead: 
// https://vuejs.org/guide/components/provide-inject.html#provide
app.provide('$appState', reactive({ inputStyle: 'outlined' }));
app.provide('$primevue', app.config.globalProperties.$primevue);

// then in componentents that need access to them:
import { inject } from 'vue';
const $appState = inject('$appState');
const $primevue = inject('$primevue');