elementplus自定义分页器

Element Plus 是 Vue 3 的 UI 组件库，它基于 Element UI 进行了升级和优化。其中，自定义分页器是指你可以根据项目需求对 Element Plus 的内置分页组件进行扩展和定制。在 Element Plus 中，`<el-pagination>` 是一个常用的用于数据分页展示的组件。

要自定义分页器，你可以：

1. **修改样式**：通过 CSS 样式覆盖默认的样式，实现自定义的颜色、布局或者图标等。

<template>
  <el-pagination
    :current-page.sync="currentPage"
    :page-size="pageSize"
    layout="prev, pager, next"
    :total="totalCount"
    style="width: 200px; /* 自定义宽度 */"
  ></el-pagination>
</template>

<style scoped>
.el-pagination {
  background-color: #f5f5f5;
  border-radius: 4px;
}
/* ...其他自定义样式... */
</style>

2. **添加额外功能**：如果需要，可以在现有的分页组件基础上增加新的按钮或控制项，例如搜索框、跳转链接等。

<template>
  <div class="custom-pagination">
    <el-pagination />
    <input type="text" v-model="searchKeyword" placeholder="Search..." />
  </div>
</template>

3. **响应式编程**：确保自定义的行为可以随着数据变化而更新，如当前页数、总页数的变化。

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalCount: null,
      searchKeyword: '',
    };
  },
  watch: {
    // 当总页数或搜索关键词改变时，触发分页
    total(newTotal) {
      this.$nextTick(() => {
        this.currentPage = 1;
      });
    },
    searchKeyword(newKeyword) {
      this.$emit('update:currentPage', 1);
    },
  },
};
</script>