PrimeVue DataTable组件在VUE3中不起作用

Question

我正在为我的网站使用PrimeVue Altatauge，但是即使我安装了所有要求，也没有显示出来的所有要求。只有一个警告即将出现：

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

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)

。

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

usertable.vue

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

在 很高兴：'）

Answer 1

我建议您使用AutoImport而不是这种方式。
首先安装unplugin-vue-components通过npm安装unplugin-vue-components

第二，将这些行添加到vite> vite> vite.config.ts：

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

更多详细信息：自动导入-Prime Vue

Answer 2

您正在键入错误的标签
我建议您按以下方式更改：

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>