本文实例为大家分享了vue2 table分页组件的具体代码,供大家参考,具体内容如下
pagination.js:
pagination.css:
<div class="jb51code">
<pre class="brush:css;">
ul,li {
margin: 0;
padding: 0;
}
.page-bar {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float: right;
border-radius: 4px;
}
.page-bar .info{
float: left;
margin-left:16px;
font-size: 16px;
height: 100%;
}
.page-bar .showpages{
float: left;
font-size: 16px;
margin-left: 16px;
height: 100%;
}
.page-bar .showpages .showpages-select{
width: 70px;
margin: 0 10px;
height: 28px
}
.page-bar .pagesbtn{
float: left;
margin-left:16px;
width: 650px;
height: 100%;
}
.page-bar .pagesbtn ul{
text-align: center;
width: 100%;
}
.page-button-disabled {
color:#ddd !important;
}
.page-bar li {
list-style: none;
display: inline-block;
}
.page-bar li:first-child > a {
margin-left: 0;
}
.page-bar a {
border: 1px solid #ddd;
text-decoration: none;
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer;
}
.page-bar a:hover {
background-color: #eee;
}
.page-bar .active a {
color: #fff;
cursor: default;
background-color: #1e7aca;
border-color: #1e7aca;
}
.page-bar i {
font-style: normal;
color: #1e7aca;
margin: 0 4px;
font-size: 12px;
}