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

---

主要改动说明

1. 新增计算属性

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

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

2. 新增操作方法

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

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

3. Render 函数结构

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

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

4. 样式适配

   .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);
}

效果图展示