无法使用Vue和PrimeVue渲染DataTable

问题描述 投票:0回答:1

我正在尝试使用 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")

我尝试使用填充数组和空数组,但两者都不起作用。什么可能导致此错误?

vue.js datatable render cdn primevue
1个回答
0
投票

如果使用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>

© www.soinside.com 2019 - 2024. All rights reserved.