如何全局修改PrimeVue组件默认设置？含DataTable分页模板配置

一、全局自定义DataTable的paginatorTemplate #

不用每个DataTable实例单独配置分页模板，直接在PrimeVue初始化时指定组件的默认props即可，所有实例会自动继承这个配置：

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import DataTable from 'primevue/datatable';

const app = createApp(App);

// 全局配置PrimeVue及组件默认属性
app.use(PrimeVue, {
    components: {
        DataTable: {
            // 自定义分页模板格式，示例包含首页、上一页、页码、下一页、末页、每页行数选择器
            paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
            // 可额外设置其他全局默认属性，比如默认每页显示10条数据
            rows: 10
        }
    }
});

app.component('DataTable', DataTable);
app.mount('#app');

如果某个DataTable需要特殊模板，直接在实例上单独设置paginator-template属性，会自动覆盖全局配置。

二、全局修改PrimeVue组件默认设置的通用方法 #

PrimeVue支持两种全局配置方式，分别对应通用全局属性和单个组件的默认props：

1. 全局通用配置（所有组件共享） #

比如全局启用涟漪效果、统一设置主题等，直接在PrimeVue初始化参数里配置：

app.use(PrimeVue, {
    ripple: true, // 给所有支持的组件全局启用涟漪点击效果
    theme: {
        preset: 'lara-light-blue', // 设置全局主题
        options: {
            darkModeSelector: '.app-dark' // 自定义暗黑模式触发选择器
        }
    }
});

2. 单个组件的全局默认props #

针对特定组件统一设置默认属性，逻辑和DataTable配置一致，在components对象里指定组件名，再设置对应的props即可。比如全局设置Button的默认样式：

app.use(PrimeVue, {
    components: {
        Button: {
            severity: 'secondary', // 默认次级按钮样式
            rounded: true // 默认圆角按钮
        },
        InputText: {
            placeholder: '请输入内容' // 默认占位符
        }
    }
});

注意：组件名称必须和PrimeVue官方组件名完全一致（如DataTable、Button、InputText），否则配置不生效。

内容的提问来源于stack exchange，提问作者mfleshman