ElementUI的分页组件如何实现添加首尾页以及页长自定义配置?

150 阅读1分钟

ElementUI的分页组件如何实现添加首尾页以及页长可输入配置

最近遇到一个需求,需要给基于elementUI分页器封装的组件上加上一键跳转首尾页以及页长能支持手动输入的功能。众所周知,elementUI可用的API实际上是有限的,而需求是千变万化的,要以有限的API去应对无限的需求实际上就是考验前端的应变能力。

image.png

element分页器拉到最底部你会发现,elementUI提供了一个slot属性,它的作用是让我们可以自定义写一些自定义节点对分页器功能做出更改,于是我就这么使用,在使用时我发现slot居然不能起名字,且无论你插入多少个,都会渲染出你写的所有节点,真是个操蛋的设计啊!

于是就只能使用那招了,操作节点!以下是我对需求的实现思路:

  1. 跳转首尾页

我们可以给自定义的节点加上class,然后在组件挂载完成之后,根据className获取到节点,对不需要的节点进行隐藏操作即可!这里我们给分页器两个位置都加上节点,然后分别对不同位置不需要的节点进行隐藏,就搞定啦!

carbon (3).png

carbon (4).png

  1. 页长支持手动输入

这一步也不难,相信很多人一眼看出了解决思路,替换他封装死的select即可,道理同上,也是自定义节点去实现,不过el-select记得加上允许创建的api:allow-create。

到此,分页器算是改造完成了,来看看效果:

image.png

首次发文,望各位批评指正。