如何用Tampermonkey脚本设置Angular Material分页器默认100行

完全可以通过Tampermonkey脚本实现这个需求，下面提供两种可靠的实现方式：

方案一：模拟用户选择下拉选项（兼容性更强） #

这种方式不依赖Angular内部API，直接模拟点击分页器的下拉菜单并选择100行选项，稳定性更高：

// ==UserScript==
// @name         Set Mat-Paginator Default to 100 Rows
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Force mat-paginator to show 100 rows by default
// @author       You
// @match        替换为你的平台页面URL
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 等待分页器元素加载完成
    function waitForPaginator() {
        const paginator = document.querySelector('mat-paginator');
        if (paginator) {
            setPageSizeTo100(paginator);
        } else {
            setTimeout(waitForPaginator, 500); // 每500ms检查一次
        }
    }

    function setPageSizeTo100(paginator) {
        // 找到分页器的下拉按钮
        const dropdownTrigger = paginator.querySelector('.mat-select-trigger');
        if (!dropdownTrigger) {
            setTimeout(() => setPageSizeTo100(paginator), 300);
            return;
        }

        // 点击下拉按钮展开选项
        dropdownTrigger.click();

        // 等待下拉选项加载，然后找到值为100的选项并点击
        setTimeout(() => {
            const option100 = document.querySelector('.mat-option[aria-value="100"]');
            if (option100) {
                option100.click();
            }
        }, 200);
    }

    // 页面加载后启动监听
    window.addEventListener('load', waitForPaginator);
})();

补充适配SPA场景 #

如果平台是单页应用，页面路由切换后分页器会重新渲染，可把window.addEventListener('load')替换为DOM监听：

// 替换原有的window.addEventListener部分
const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => {
        const paginator = document.querySelector('mat-paginator');
        if (paginator) {
            setPageSizeTo100(paginator);
            observer.disconnect(); // 找到后停止监听
        }
    });
});

observer.observe(document.body, { childList: true, subtree: true });

方案二：直接操作Angular组件实例（更高效） #

如果平台Angular版本支持，可直接获取mat-paginator的组件实例，修改分页参数：

// ==UserScript==
// @name         Set Mat-Paginator Default to 100 Rows (Angular API)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Force mat-paginator to show 100 rows via Angular component API
// @author       You
// @match        替换为你的平台页面URL
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function waitForPaginator() {
        const paginator = document.querySelector('mat-paginator');
        if (paginator && window.ng) {
            // 获取Angular组件实例
            const paginatorComponent = window.ng.getComponent(paginator);
            if (paginatorComponent) {
                paginatorComponent.pageSize = 100;
                paginatorComponent.pageSizeOptions = [10,25,50,100]; // 确保选项列表正确
                paginatorComponent._changePageSize(100); // 触发分页更新
            }
        } else {
            setTimeout(waitForPaginator, 500);
        }
    }

    window.addEventListener('load', waitForPaginator);
})();

说明 #

• 这种方式需要页面全局暴露ng对象（大部分Angular生产环境会保留该入口）
• 直接修改组件参数并触发更新，比模拟点击更高效，不会产生额外UI交互事件

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