elementUI使用render函数封装公共分页组件

使用 Render 函数添加「首页」和「尾页」按钮的完整实现：

import './index.scss';export default {name: 'co-pagination',props: {total: { type: Number, required: true },page: { type: Number, default: 1 },limit: { type: Number, default: 10 },pagerCount: { type: Number, default: 7 },size: String,scrollTop: Number,layout: String},data: function () {return {pageSizes: [5, 10, 20, 30, 40, 50]};},computed: {// 计算总页数totalPages() {return Math.ceil(this.total / this.limit);}},methods: {$_handleSizeChange() {this.$emit('update:page', 1);this.$emit('pagination');this.handleScroll();},$_currentChange() {this.$emit('pagination');this.handleScroll();},$_updatePageSize(v) {this.$emit('update:limit', v);},$_updateCurrentPage(v) {this.$emit('update:page', v);},// 新增：跳转首页goFirstPage() {if (this.page === 1) return;this.$_updateCurrentPage(1);this.$_currentChange();},// 新增：跳转尾页goLastPage() {if (this.page === this.totalPages) return;this.$_updateCurrentPage(this.totalPages);this.$_currentChange();},handleScroll() {if (process.client && typeof this.scrollTop !== 'undefined') {scrollTo(0, this.scrollTop);}}},render: function (h) {// 创建分页组件const pagination = h('el-pagination', {attrs: {'id': this.size === 'small' ? 'com-pagination-small' : 'com-pagination','layout': this.layout || 'prev, pager, next, sizes, total, jumper','prev-text': '上一页','next-text': '下一页','pager-count': this.pagerCount},props: {'page-sizes': this.pageSizes,'page-size': this.limit,'current-page': this.page,'total': this.total},on: {'size-change': this.$_handleSizeChange,'current-change': this.$_currentChange,'update:pageSize': this.$_updatePageSize,'update:currentPage': this.$_updateCurrentPage}});// 创建首页按钮const firstBtn = h('el-button', {attrs: {disabled: this.page === 1},on: {click: this.goFirstPage},class: 'pagination-custom-btn'}, '首页');// 创建尾页按钮const lastBtn = h('el-button', {attrs: {disabled: this.page === this.totalPages},on: {click: this.goLastPage},class: 'pagination-custom-btn'}, '尾页');// 包裹容器return h('div', {class: 'custom-pagination-container',style: {display: 'flex',alignItems: 'center',gap: '10px'}}, [firstBtn, pagination, lastBtn]);}
};

配套样式建议 (`index.scss`)

.custom-pagination-container {.pagination-custom-btn {padding: 0 12px;height: 32px;line-height: 32px;// 保持与 Element 分页按钮风格一致&[disabled] {color: #c0c4cc;cursor: not-allowed;}}// 小尺寸适配#com-pagination-small + .pagination-custom-btn {height: 28px;line-height: 28px;}
}

主要改动说明

新增计算属性

computed: {totalPages() {return Math.ceil(this.total / this.limit);}
}

用于计算总页数，控制尾页按钮的禁用状态

新增操作方法

goFirstPage() {if (this.page === 1) return;this.$_updateCurrentPage(1);this.$_currentChange();
},
goLastPage() {if (this.page === this.totalPages) return;this.$_updateCurrentPage(this.totalPages);this.$_currentChange();
}

处理首页/尾页跳转逻辑，保持与原有事件触发机制一致

Render 函数结构

return h('div', {class: 'custom-pagination-container',style: { /* flex 布局 */ }
}, [firstBtn, pagination, lastBtn]);

通过 Flex 布局将按钮与分页组件水平排列

样式适配

.custom-pagination-container {// 保持按钮与分页组件高度对齐.el-pagination {padding: 0;}
}

确保自定义按钮与 Element 分页组件视觉风格统一

使用示例

<co-pagination:total="100":page.sync="currentPage":limit.sync="pageSize"@pagination="handlePagination"
/>

效果说明

首页/尾页按钮会根据当前页自动禁用
点击按钮会触发与分页组件相同的 update:page 和 pagination 事件
完美适配原有组件的所有功能（页面大小切换、页码跳转等）

首页和尾页如果配置成可控制的

在组件中新增配置参数，用于控制按钮的显示、文本和样式类：

render: function (h) {// 创建分页组件（同之前代码）const pagination = h('el-pagination', { /* ... */ });// 动态生成首页按钮（条件渲染）const firstBtn = this.showFirst && h('el-button', {attrs: {disabled: this.page === 1},class: ['pagination-custom-btn', this.firstClass], // 合并默认类与自定义类on: {click: this.goFirstPage}}, this.firstText);// 动态生成尾页按钮（条件渲染）const lastBtn = this.showLast && h('el-button', {attrs: {disabled: this.page === this.totalPages},class: ['pagination-custom-btn', this.lastClass], // 合并默认类与自定义类on: {click: this.goLastPage}}, this.lastText);// 过滤空节点（当 showFirst/showLast 为 false 时）const buttons = [firstBtn, pagination, lastBtn].filter(Boolean);return h('div', {class: 'custom-pagination-container',style: { display: 'flex', alignItems: 'center', gap: '10px' }}, buttons);
}