我正在尝试使用 Vue 和 PrimeVue 显示数据表。它不加载数据,甚至也不显示表格。它在控制台上给出此警告消息:
[Vue warn]: Component is missing template or render function.
at <PDatatable>
at <App>
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PrimeVue Demo</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/primevue/core/core.min.js"></script>
</head>
<body>
<div id="app">
<p-datatable :value="products">
<p-column field="code" header="Code"></p-column>
<p-column field="name" header="Name"></p-column>
<p-column field="category" header="Category"></p-column>
<p-column field="quantity" header="Quantity"></p-column>
</p-datatable>
</div>
<script src="app.js"></script>
</body>
</html>
app.js:
const { createApp, ref } = Vue
const App = {
setup() {
const products = ref([])
return { products }
},
components: {
"p-column": primevue.column,
"p-datatable": primevue.datatable
}}
createApp(App).use(primevue.config.default).mount("#app")
我尝试使用填充数组和空数组,但两者都不起作用。什么可能导致此错误?
如果使用CDN,则必须单独加载组件(参见docs),因此对于datatable和column,需要添加:
<script src="https://unpkg.com/primevue/datatable/datatable.min.js"></script>
<script src="https://unpkg.com/primevue/column/column.min.js"></script>
这是一个片段:
const { createApp, ref } = Vue
const App = {
setup() {
const products = ref([])
return {
products
}
},
components: {
"p-column": primevue.column,
"p-datatable": primevue.datatable
}
}
const app = createApp(App)
.use(primevue.config.default)
.mount("#app")
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/primevue/core/core.min.js"></script>
<script src="https://unpkg.com/primevue/datatable/datatable.min.js"></script>
<script src="https://unpkg.com/primevue/column/column.min.js"></script>
<div id="app">
<p-datatable :value="products">
<p-column field="code" header="Code"></p-column>
<p-column field="name" header="Name"></p-column>
<p-column field="category" header="Category"></p-column>
<p-column field="quantity" header="Quantity"></p-column>
</p-datatable>
</div>
<script src="app.js"></script>