对element中Pagination 分页默认样式的的修改

在项目中看到了UI这样的布局

image.png

但是项目用的是element-ui,它是这样的布局

image.png
所以得修改咯
首先找到它的样式
image.png

然后给他浮动,注(项目用的scss)

::v-deep {
  .el-pagination {
        width: 100%;
        .el-pagination__jump {
            float: right;
        }
        .btn-next {
            float: right;
        }
        .el-pager {
            float: right;
        }
        .btn-prev {
            float: right;
        }
    }
}

• 注释: 本文里面使用的::v-deep,也可以用/deep/,效果都是一样的啦...
• 如果是使用/deep/的话,就是这样的样式

/deep/ .pagination .el-pagination__jump {
  float: right;
}

结果...

image.png
怎么给我反啦,
image.png
然后仔细看了一下,发现了问题
image.png
根据float:right的规则,是从html标签的顺序来的,比如第一个是btn-prev,那么它就是在最右边,el-pager从右往左是倒数第二,btn-next是倒数第三,以此类推...
我们去做出对应的修改

::v-deep {
  .el-pagination {
        width: 100%;
        text-align: right;
        .el-pagination__sizes {
            float: left;
        }
        .el-pagination__total {
            float: left;
        }
    }
}

先把所有的都往右排,然后把两个要往左边的,给它两左浮动属性,就ok啦,效果如下图

image.png

果然,又不小心犯了常识性错误,唉....

image.png

记录小细节,每天进步一点点