分页器
This commit is contained in:
辉
parent
6a540afb69
commit
5ed24dfb89
185
src/views/components/Pagination/index.vue
Normal file
185
src/views/components/Pagination/index.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="pagination">
|
||||
<button style="background-color: #ffff">共 {{ totalPage }} 条</button>
|
||||
<el-select v-model="currentpageSize" placeholder="请选择" style="width: 100px;" size="mini" @change="changesize">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<button @click="updateCPage(currentPage - 1)" :disabled="currentPage <= 1">上一页</button>
|
||||
<button v-if="startEnd.start > 1" @click="updateCPage(1)">1</button>
|
||||
<button v-if="startEnd.start > 2" icon="el-icon-more" @click="updateCPage(currentPage - 5)"
|
||||
:class="[quickprevIconClass, { buttonactive: quickprevIconClass == 'el-icon-d-arrow-left' }]"
|
||||
@mouseenter="onMouseenter('left')" @mouseleave="quickprevIconClass = 'el-icon-more'">
|
||||
</button>
|
||||
<template v-for="(item, index) in totalPage">
|
||||
<button :class="{ active: currentPage === item }" :key="index"
|
||||
v-if="item >= startEnd.start && item <= startEnd.end" @click="updateCPage(item)">{{ item }}</button>
|
||||
</template>
|
||||
<button v-if="startEnd.end < totalPage - 1" icon="el-icon-more"
|
||||
:class="[quicknextIconClass, { buttonactive: quicknextIconClass == 'el-icon-d-arrow-right' }]"
|
||||
@click="updateCPage(currentPage + 5)" @mouseenter="onMouseenter('right')"
|
||||
@mouseleave="quicknextIconClass = 'el-icon-more'">
|
||||
</button>
|
||||
<button v-if="startEnd.end < totalPage" @click="updateCPage(totalPage)">{{ totalPage }}</button>
|
||||
<button @click="updateCPage(currentPage + 1)" :disabled="currentPage >= totalPage">下一页</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
/*
|
||||
1. total,总条数 (外部使用Pagination组件的区域传递进来的数据)
|
||||
2. pageSize,每页显示多少条(外部使用Pagination组件的区域传递进来的数据)
|
||||
3. totalPage, 根据1,2派生出总页数
|
||||
4. lxyms,连续页码数(外部使用Pagination组件的区域传递进来的数据)
|
||||
5. currentPage,当前页(内部数据)
|
||||
6. startEnd,连续页码的起始页 & 最终页
|
||||
7. indexFromWrap: 外部逻辑传入的当前页下标
|
||||
*/
|
||||
name: "Pagination",
|
||||
//由父组件传递总条数 每页显示数 连续页码数 当前页下标
|
||||
props: ["total", "pageSize", "indexFromWrap"],
|
||||
data() {
|
||||
return {
|
||||
lxyms: 7,
|
||||
currentPage: this.indexFromWrap,
|
||||
quickprevIconClass: "el-icon-more",
|
||||
quicknextIconClass: 'el-icon-more',
|
||||
options: [{
|
||||
value: 10,
|
||||
label: '10条/页'
|
||||
}, {
|
||||
value: 20,
|
||||
label: '20条/页'
|
||||
}, {
|
||||
value: 30,
|
||||
label: '30条/页'
|
||||
}, {
|
||||
value: 50,
|
||||
label: '50条/页'
|
||||
}, {
|
||||
value: 100,
|
||||
label: '100条/页'
|
||||
}],
|
||||
currentpageSize: 10
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
//总页数
|
||||
totalPage() {
|
||||
return Math.ceil(this.total / this.pageSize)
|
||||
},
|
||||
//最终页-起始页 = 连续页码数-1
|
||||
startEnd() {
|
||||
let { currentPage, lxyms, totalPage } = this
|
||||
// return console.log(this)
|
||||
let start;
|
||||
let end;
|
||||
//计算连续页码的起始页
|
||||
start = currentPage - Math.floor(lxyms / 2)
|
||||
if (start < 1) {
|
||||
start = 1
|
||||
this.quickprevIconClass = 'el-icon-more'
|
||||
}
|
||||
//结束页
|
||||
end = start + lxyms - 1 //此时当start<1时 在计算end时已经进行补位了
|
||||
// end>totalPage ?end=totalPage:""
|
||||
if (end > totalPage) {
|
||||
end = totalPage;
|
||||
start = end - lxyms + 1; //此处当结束位置超出时,用start进行补位
|
||||
start < 1 ? start = 1 : "" // 要满足start处于一个正常的范围
|
||||
}
|
||||
if (start >= 2 && end < totalPage - 1) {
|
||||
start += 2
|
||||
}
|
||||
if (end == totalPage - 1 && start > 1) {
|
||||
start += 1
|
||||
end -= 1
|
||||
}
|
||||
return { start, end }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changesize() {
|
||||
this.$emit("updateCPage", this.currentPage, this.currentpageSize)
|
||||
},
|
||||
onMouseenter(direction) {
|
||||
if (direction === 'left') {
|
||||
this.quickprevIconClass = 'el-icon-d-arrow-left';
|
||||
} else {
|
||||
this.quicknextIconClass = 'el-icon-d-arrow-right';
|
||||
}
|
||||
},
|
||||
updateCPage(currentPage) {
|
||||
if (currentPage < 1) return
|
||||
if (currentPage === this.currentPage) return;
|
||||
if (currentPage > this.totalPage - 3) {
|
||||
this.quicknextIconClass = 'el-icon-more'
|
||||
}
|
||||
if (currentPage > this.totalPage) {
|
||||
this.currentPage = this.totalPage
|
||||
} else {
|
||||
this.currentPage = currentPage;
|
||||
}
|
||||
//将当前页的数据,与外部的父组件进行数据交互
|
||||
this.$emit("updateCPage", this.currentPage, this.currentpageSize)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
//监听当前页下标
|
||||
indexFromWrap: {
|
||||
handler(val) {
|
||||
this.currentPage = val
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pagination {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 20px;
|
||||
height: 40px;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
button {
|
||||
margin: 0 5px;
|
||||
background-color: #f4f4f5;
|
||||
color: #606266;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
padding: 0 8px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
min-width: 35.5px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
|
||||
&[disabled] {
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.buttonactive {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -50,8 +50,8 @@
|
||||
</el-row>
|
||||
</div>
|
||||
<div ref="table">
|
||||
<el-table ref="tables" :max-height="maxTableHeight" v-loading="loading" :data="list" @selection-change="handleSelectionChange"
|
||||
:default-sort="defaultSort" @sort-change="handleSortChange">
|
||||
<el-table ref="tables" :max-height="maxTableHeight" v-loading="loading" :data="list"
|
||||
@selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="日志编号" align="center" prop="operId" />
|
||||
<el-table-column label="系统模块" align="center" prop="title" />
|
||||
@ -84,8 +84,10 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
<Pagination :total="total" :pageSize="queryParams.pageSize" :indexFromWrap="queryParams.pageNum"
|
||||
@updateCPage="updateCPage"></Pagination>
|
||||
<!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" /> -->
|
||||
<!-- 操作日志详细 -->
|
||||
<el-dialog title="操作日志详细" :visible.sync="open" width="700px" append-to-body>
|
||||
<el-form ref="form" :model="form" label-width="100px" size="mini">
|
||||
@ -130,13 +132,16 @@
|
||||
|
||||
<script>
|
||||
import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";
|
||||
|
||||
import Pagination from '../../components/Pagination'
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
},
|
||||
name: "Operlog",
|
||||
dicts: ['sys_oper_type', 'sys_common_status'],
|
||||
data() {
|
||||
return {
|
||||
maxTableHeight:undefined,
|
||||
maxTableHeight: undefined,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
@ -176,6 +181,11 @@ export default {
|
||||
this.screenChange()
|
||||
},
|
||||
methods: {
|
||||
updateCPage(index, size) {
|
||||
this.queryParams.pageNum = index
|
||||
this.queryParams.pageSize = size
|
||||
this.getList();
|
||||
},
|
||||
/** 查询登录日志 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
@ -269,3 +279,39 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pagination {
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
margin: 0 5px;
|
||||
background-color: #f4f4f5;
|
||||
color: #606266;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
padding: 0 4px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
min-width: 35.5px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
|
||||
&[disabled] {
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.active {
|
||||
cursor: not-allowed;
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user