ElementUI Plus

Pagination 分页

感觉设计上能自定义的部分比较少, 另外文档给的不是很到位.

废弃的事件

官方推荐用 Vue3 自己的 API 去监听分页状态变化, 没必要用事件, 以精简组件设计, 也是情理之中, 但是在文档示例里仍然使用即将废弃的事件就有点说不过去了.

<el-pagination
  v-model:current-page="currentPage"
  ...
  // 推荐的用法
  @update:current-page="handleCurrentPageChange"
  // 废弃的用法
  @current-change="handleCurrentPageChange"
/>

插槽

官方只开了一个 default 插槽, 使用它的话, 需要在 layout 中声明 slot

<el-pagination
  ...
  // 在 layout 的合适位置加上 slot
  layout="sizes, prev, pager, next, slot"
>
  // 定义插槽内容
  <template #default>
    这是 slot
  </template>
</el-pagination>

我第一眼以为 sizes prev 等等 layout 组成都会有自己的插槽, 感觉自定义程度上有点弱, 而且插槽只能开一个, 想深度定制的话就需要手写了. 不知是我理解有问题, 还是设计如此.