利用插槽自定义el-pagination分页器

Vue 前端利用插槽自定义el-pagination分页器

今天在开发中遇到一个“特殊”需求，设计一个分页器，但该分页器无法在Element中取到相同的，尽管有一点偏差，但是程序员嘛，秉着能复用绝不开发的原则前去沟通，沟通无效，埋头苦干…

el-pagination样式为：

但需求想要的效果为：

即使只有细微的差距，但也是浪费开发时间。尽管嘴上念叨不停，但是还是需要动手操作，思来想去，选择用插槽的方式来实现，话不多少，上代码：

分页器的参数配置均不变，选项下拉也是很简单的设计

            options: [
                {
                    value: "10",
                    label: "10",
                },
                {
                    value: "20",
                    label: "20",
                },
                {
                    value: "30",
                    label: "30",
                },
                {
                    value: "40",
                    label: "40",
                },
            ],

一些样式合集：

        .pageSizeInput {
            .ceshi {
                display: block !important;
                width: 140px;
            }
            .tiao {
                // margin-left: -18px;
                margin-right: 10px;
            }
            .fstyle {
                display: inline-block;
                margin-top: -30px;
                font-family: PingFangSC-Regular, PingFang SC;
                color: #666666;
                font-weight: 400;
                font-size: 13px;
            }
        }

注意监听一下分页数据的变化，然后执行列表刷新就可以啦。觉得好用的留个赞吧。