PrimeVue 数据表组件在 vue3 中不起作用

Question

我在我的网站上使用 PrimeVue fatatable，但即使我已经安装了所有要求，也没有显示任何内容。仅出现警告：

Failed to resolve component: data-table
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

在main.js中

import PrimeVue from 'primevue/config'
import Column from 'primevue/column'
import Dialog from 'primevue/dialog'
import DataTable from 'primevue/datatable'
appInstance.use(PrimeVue)
appInstance.component('Column', Column)
appInstance.component('Dialog', Dialog)
appInstance.component('Datatable', DataTable)

在 userTable.vue 中：

<data-table :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>
</data-table>

以及 data() 中的产品示例：

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"}
      ],

我正在开发 vue 3，所以如果有人知道原因和解决方案，我会很高兴:')

Answer 1

您输入的标签错误 我建议你改变如下：

appInstance.component('Datatable', DataTable)

由

appInstance.component('DataTable', DataTable)

在组件中

<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>

Answer 2

我建议你使用自动导入而不是那样。 首先通过

unplugin-vue-components

 安装 

npm install unplugin-vue-components

其次，将这些行添加到您的

vite.config.ts

中：

//...
import Components from "unplugin-vue-components/vite"; 
import { PrimeVueResolver } from "unplugin-vue-components/resolvers";
//...
export default defineConfig({
     plugins: [
         //...
         Components({
               resolvers: [PrimeVueResolver()],
         }),
         //...
     ],
});
//...