vue分页组件（二）
组件样式
代码
<template><div class="paging-content">
<div class="fl" v-if="operatePre&&!simple">
每页
<el-select v-model="pageSize" style="width: 60px" @change="pageSizeChange">
<el-option
v-for="(item, index) in pageSizeOpts"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>条
<span style="margin-left:15px;" v-if="operateTotal">共 {{total}} 条记录</span>
</div>
<div class="fl" v-if="simple">
<el-select v-model="pageSize" style="width: 60px" @change="pageSizeChange">
<el-option
v-for="(item, index) in pageSizeOpts"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
<div class="paging-box">
<ul class="pagination">
<li :class="{\'disabled\': current == 1}" v-if="showPrePage" class="page-pre">
<a href="javascript:;" @click="setCurrent(1)">
<span class="icon iconfont icon-diyiye"></span>
</a>
</li>
<li :class="{\'disabled\': current == 1}" class="page-pre">
<a href="javascript:;" @click="setCurrent(current - 1)">
<span class="icon iconfont icon-shangyiye"></span>
</a>
</li>
<li v-for="p in grouplist" :class="{\'active\': current == p.val}" :key="p.val"><a href="javascript:;"
@click="setCurrent(p.val)"> {{ p.text }} </a>
</li>
<li :class="{\'disabled\': current == page}" class="page-after">
<a href="javascript:;" @click="setCurrent(current + 1)">
<span class="icon iconfont icon-xiayiye"></span>
</a>
</li>
<li :class="{\'disabled\': current == page}" v-if="showPrePage" class="page-after">
<a href="javascript:;" @click="setCurrent(page)">
<span class="icon iconfont icon-weiye"></span>
</a>
</li>
<li class="go-to" style="display:none;">
<input type="text" v-model="goPage" />
<button type="button" @click="goToPage">跳转</button>
</li>
</ul>
</div>
<span v-if="showTotalPage" style="padding:0 10px;">共{{page}}页</span>
</div>
</template>
<script>
export default {
name: \'pagination\',
data () {
return {
goPage: \'1\',
current: this.currentPage
}
},
props: {
total: {// 数据总条数
type: Number,
default: 0
},
operatePre: { // 是否显示每页多少条
type: Boolean,
default: true
},
operateTotal: { // 是否显示总数
type: Boolean,
default: true
},
simple: { // 是否简单模式 只有页码
type: Boolean,
default: false
},
showPrePage: { // 是否显示上一页
type: Boolean,
default: false
},
showTotalPage: { // 是否显示总页数
type: Boolean,
default: false
},
pageSizeOpts: { // 每页多少条选项
type: Array,
default: function(){
return [10, 20, 30]
}
},
pageSize: {// 每页显示条数
type: Number,
default: 10
},
currentPage: {// 当前页码
type: Number,
default: 1
},
pagegroup: {// 分页条数
type: Number,
default: 5,
coerce: function (v) {
v = v > 0 ? v : 5
return v % 2 === 1 ? v : v + 1
}
}
},
computed: {
page: function () { // 总页数
return Math.ceil(this.total / this.pageSize)
},
grouplist: function () { // 获取分页页码
var len = this.page; var temp = []; var list = []; var count = Math.floor(this.pagegroup / 2); var center = this.current
if (len <= this.pagegroup) {
while (len--) {
temp.push({ text: this.page - len, val: this.page - len })
}
;
return temp
}
while (len--) {
temp.push(this.page - len)
}
;
var idx = temp.indexOf(center);
(idx < count) && (center = center + count - idx);
(this.current > this.page - count) && (center = this.page - count)
temp = temp.splice(center - count - 1, this.pagegroup)
do {
var t = temp.shift()
list.push({
text: t,
val: t
})
} while (temp.length)
if (this.page > this.pagegroup) {
(this.current > count + 1) && list.unshift({ text: \'...\', val: list[0].val - 1 });
(this.current < this.page - count) && list.push({ text: \'...\', val: list[list.length - 1].val + 1 })
}
return list
}
},
watch: {
\'limit\': function (newVal, oldVal) { // 最多显示多少个页码，多出点省略号
if (newVal != oldVal && oldVal != undefined) {
this.$dispatch(\'page-limit-change\', newVal)
}
}
},
methods: {
// 页码点击事件
setCurrent (idx) {
if (this.current != idx && idx > 0 && idx < this.page + 1) {
this.current = idx
this.$emit(\'pagechange\', this.current)
}
},
// 跳转方法
goToPage () {
this.setCurrent(this.goPage)
},
// 每页多少条改变事件
pageSizeChange (val) {
this.$emit(\'page-size-change\', val)
}
}
}
</script>
<style lang="stylus" scoped>
.paging-content {
position: relative;
margin-top: 20px;
height: 26px;
line-height: 26px;
display: flex;
align-items: center;
justify-content: space-between;
> div {
font-size: 14px;
}
.ivu-select{
color: #666;
}
.fl {
float: left;
color: #666;
}
.paging-box{
.pagination {
overflow: hidden;
li {
float: left;
height: 26px;
width: 26px;
margin-left: 4px;
// width: auto;
// border-radius: 5px;
color: #999;
/* &:hover {
a {
color: #23527c;
background-color: #eee;
}
} */
a {
display: block;
// padding: 6px 12px;
height: 100%;
width: 100%;
line-height: 26px;
text-align: center;
font-size: 14px;
color: #666;
border-radius: 15px;
// border: 1px solid #ddd;
text-decoration: none
.iconfont{
font-size: 12px;
color: #999;
}
&:hover{
background: #f5f5f5;
}
}
}
li.disabled a{
&:hover{
background: none;
}
.iconfont{
color: rgba(153, 153, 153, 0.3);
}
}
.page-pre,.page-after{
a{
width: 34px;
}
}
.active {
a {
background: rgba(58,133,252,0.15);
// border-color: #337ab7;
color: #4C8CF0;
}
}
}
}
}
</style>
以上是 vue分页组件（二） 的全部内容， 来源链接： utcz.com/z/380921.html
